Css className比资料用户界面v5中的css类具有更低的特性。

Question

例如，在我的react应用程序中使用来自@material/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类具有更高的特异性(下面的屏幕截图是来自material文档的示例代码)

​

​

在我的反应材料用户界面设置中有什么可能出错呢？我需要让classes.myCloseButtonstyle赢得特异性。不，我的意思是，我需要把.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root和classes.myCloseButtonstyle的顺序颠倒。

样式从资料-ui文档中订购：

1. classes.myCloseButtonstyle

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

我的应用程序中的syles命令：

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

我需要改变命令如下：

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

Answer 1

要增加CSS class的优先级，您需要增加类的特殊性。

检查此文档以提高特异性

也就是说，在解决问题的同时，尝试在css文件中使用button.myCloseButtonstyle来增加类的优先级。

Answer 2

可以通过指定路径来提高专用性：

div > div > buttonm.makeStyles-myCloseButtonStyle-23

或者简单地重复上课：

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

正如w3org所说：

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

Answer 3

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

我解决了这个5版本的资料用户界面CSS订单注入问题。