CSS className 的特异性低于material-ui v5 中的 css 类

Question

例如在我的 React 应用程序中使用 @material-ui/core 中的 IconButton 时，我应用了一个 className

classes.myCloseButtonstyle

，事实证明它与 css 类相比具有较低的特异性

.css-1743419-MuiButtonBase-root-MuiIconButton-root

（参见下面的屏幕截图）。

当我在这里检查文档时https://next.material-ui.com/components/dialogs/#customized-dialogs 该顺序与我在上面的屏幕截图中得到的顺序不同。

classes.myCloseButtonstyle

比这个

.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

类具有更高的特异性（下面的屏幕截图是来自材料 ui 文档的示例代码）

我的 React Material ui 设置可能有什么问题？我需要让

classes.myCloseButtonstyle

赢得特异性。不，我的意思是，我需要订购

.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

和

classes.myCloseButtonstyle

逆转。

来自material-ui 文档的样式顺序：

1. classes.myCloseButtonstyle

2.

.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

我的应用程序中的样式顺序：

1. .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

2. classes.myCloseButtonstyle

我需要将顺序更改为：

1. classes.myCloseButtonstyle

2. .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

Answer 1

https://github.com/mui-org/material-ui/issues/24109#issuecomment-751125891

我通过遵循此版本5材料ui CSS顺序注入问题解决了它

Answer 2

要提高 CSS 的优先级

class

，您需要提高类的特异性。

检查此doc以提高特异性

同时要解决您的问题，请尝试在 css 文件中使用

button.myCloseButtonstyle

来提高类优先级。

Answer 3

您可以通过指定路径来增加特异性：

div > div > buttonm.makeStyles-myCloseButtonStyle-23

或者只是重复上课：

div > div > buttonm.makeStyles-myCloseButtonStyle-23.makeStyles-myCloseButtonStyle-23

正如 w3org 所说：

注意：允许重复出现相同的简单选择器，并且 确实增加特异性。

Answer 4

我也面临着同样的问题。我只需要添加 StyledEngineProvider 并指定jectFirst，如下所示：

<StyledEngineProvider injectFirst>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
 </StyledEngineProvider>

您可以在此处阅读文档：https://mui.com/material-ui/migration/v5-style-changes/#style-library 感谢@Paolo Forgia 指出了文档。