材质ui包含的按钮样式被MuiButtonBase-root覆盖

Question

我正在使用material-ui和react。我有一个简单的包含按钮，使用

 <Button variant='contained' color='primary'> Edit</Button>

但是，该按钮看起来并不像一个包含的按钮。如该屏幕截图here所示。

在进一步调查中，我发现.MuiButtonBase-root样式将覆盖.MuiButton-containedPrimary样式，如本screenshot taken from chrome dev tools所示。

请让我知道如何解决此问题？

Answer 1

.MuiButton-root应该是一个保留颜色代码，而不是.MuiButtonBase-root

您的按钮示例实际上是您在代码中使用的示例吗？我可以看到它有一个主类，这暗示了使用prop color会导致：

<Button variant="contained" color="primary">
   Edit
</Button>

重新检查添加的classNames，然后确定哪一个实际上是覆盖颜色。

Answer 2

当我的应用程序的一部分依赖于也使用Material UI的组件库时，发生了此问题。我的应用程序和依赖项使用了不同版本的Material UI，这导致了重复的.MuiButtonBase-root样式。

我通过将@material-ui/core从dependencies移到peerDependencies的{​​{1}}中来解决了这个问题。

如果双重嵌套导入，也会发生此问题。例如：

package.json

应该是：

import Button from '@material-ui/core/Button/Button';  // Bad

Material-UI GitHub中有一个关于此问题的非常有用的线程：https://github.com/mui-org/material-ui/issues/15610

Answer 3

尝试将 @material-ui/core 移至 devDependencies：

"devDependencies": {
  "@material-ui/core": "^4.12.0",

并将其添加到 peerDependencies 中：

"peerDependencies": {
  "@material-ui/core": "^4.12.0"
},

它帮助我删除了重复的 MuiButtonBase-root 类