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

Question

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

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

然而，该按钮看起来并不像一个包含的按钮。正如此处的屏幕截图所示。

经过进一步调查，我发现 .MuiButton-containedPrimary 样式被 .MuiButtonBase-root 样式覆盖，如从 chrome 开发工具中获取的屏幕截图所示。

请问有人可以让我知道如何解决这个问题吗？

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

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

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

重新检查添加的内容classNames并确定哪一个实际上覆盖了颜色。