Css className 比 material-ui v5 中的 css 类具有较低的特异性

Posted 2023-02-22

【中文标题】Css className 比 material-ui v5 中的 css 类具有较低的特异性

【英文标题】：Css className has low specifity than css classes from material-ui v5

【发布时间】：2021-07-16 23:23:14

【问题描述】：

当在我的 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 中的样式顺序：

classes.myCloseButtonstyle

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

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

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

我需要将顺序更改为：

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

【问题讨论】：

你可以使用!important来强加你的风格。

是的，但我需要不同的解决方案。在这种情况下，我不想使用!important。

【参考方案1】：

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

检查此doc 以增加特异性

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

【讨论】：

对不起，我更新了我的问题。我所说的增加特异性的意思是我需要颠倒元素样式.makeStyle-myCloseButtonStyle-23和.css-1743419-MuiButtonBase-root-MuiIconButton-root（见图1）的位置，以便.makeStyle-myCloseButtonStyle-23出现在.css-1743419-MuiButtonBase-root-MuiIconButton-root之前

【参考方案2】：

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

div > div > buttonm.makeStyles-myCloseButtonStyle-23

或只是重复上课：

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

As w3org says:

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

【讨论】：

对不起，我更新了我的问题。我所说的增加特异性的意思是我需要反转元素样式.makeStyle-myCloseButtonStyle-23和.css-1743419-MuiButtonBase-root-MuiIconButton-root（见图1）的位置，以便.makeStyle-myCloseButtonStyle-23出现在.css-1743419-MuiButtonBase-root-MuiIconButton-root之前

@KhairaniF 我不认为如果你颠倒顺序，那么它会增加特异性。您可以手动编辑类的顺序，看看它是否会给您想要的结果。但是，如果您像我的回复一样添加特异性，您可以增加特异性，您的风格可能会获胜，并且会应用所需的颜色

【参考方案3】：

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

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