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

Question

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

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

但是该按钮看起来不像一个包含按钮。如截图所示。

经过进一步调查，我发现 .MuiButton-containedPrimary 样式被 .MuiButtonBase-root 样式覆盖，如此中所示。

请问有人可以告诉我如何解决这个问题吗？

Answer 1

当我的应用程序的一部分依赖于也使用 Material UI 的组件库时，这个问题就发生在我身上。我的应用程序和依赖项使用了不同版本的 Material UI，这导致了重复的

.MuiButtonBase-root

样式。

我通过将

@material-ui/core

从

dependencies

移出并移入我的

peerDependencies

中的

package.json

解决了这个问题。

如果双重嵌套导入，也可能会出现此问题。例如：

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

应该是：

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

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

Answer 2

.MuiButton-root

应该是持有颜色代码的，而不是

.MuiButtonBase-root

您的按钮示例实际上是您在代码中使用的按钮吗？我可以看到它有一个主要类，这意味着使用 prop

color

这会导致：

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

重新检查添加的

classNames

并确定哪一个实际上覆盖了颜色。

Answer 3

就我而言，我使用了新材料，即 mui 和材料表。当我删除材质表时，一切都很好，但使用材质表时，某些东西会覆盖样式。

Answer 4

我修复了此编辑 .css-zylse7-MuiButtonBase-root-MuiIconButton-root 但我不确定这是最佳实践！ 有什么变化吗？

Answer 5

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

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

并将其添加到对等依赖项中：

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

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