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 doc 中的示例代码）

我的反应材料 ui 设置可能有什么问题？我需要让classes.myCloseButtonstyle 赢得特异性。不，我的意思是，我需要订购.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root 和 classes.myCloseButtonstyle 被反转。

material-ui doc 中的样式顺序：

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

要提高 CSS class 的优先级，您需要提高类的特异性。

检查此doc 以增加特异性

同时要解决您的问题，请尝试在您的 css 文件中使用 button.myCloseButtonstyle 以提高类优先级。

Answer 2

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

div > div > buttonm.makeStyles-myCloseButtonStyle-23

或只是重复上课：

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

As w3org says:

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

Answer 3

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

我按照这个版本 5 material ui CSS order injection issue 解决了这个问题