如何将样式应用于多个类的道具？答案

【问题标题】：How to apply styles to props of multiple classes?如何将样式应用于多个类的道具？
【发布时间】：2021-11-09 01:04:27
【问题描述】：

我正在使用react semantic ui lib。我的应用程序中有多个具有不同类的模态。我不想为全局模式设置样式，因为有些地方不需要。最初，我有以下样式：

.abc.ui.modal > .close {
  top: 1.0535rem !important;
  right: 1rem !important;
  color: black;
}

.xyz.ui.modal > .close {
  top: 1.0535rem !important;
  right: 1rem !important;
  color: black;
}

然后，我简化了：

.abc.ui.modal > .close,
.xyz.ui.modal > .close {
  top: 1.0535rem !important;
  right: 1rem !important;
  color: black;
}

我可以进一步简化吗？或者我可以避免使用.ui.modal > .close 两次或更多次吗？谢谢！

【问题讨论】：

标签： css reactjs styles stylesheet semantic-ui-react

【解决方案1】：

由于 CSS 的特殊性，您需要那些 .ui.modal > .close 规则以保持更高的特殊性并让您的样式覆盖语义 UI 类中的默认样式。如果你只使用 CSS，那么你已经尽可能地优化了，这很棒。

如果您使用的是像 SASS 这样的 CSS 预处理器，您可以通过执行以下操作进一步优化：

.abc,
.xyz {
  &.ui.modal > .close {
    top: 1.0535rem !important;
    right: 1rem !important;
    color: black;
  }
}

作为单独的说明，如果可能的话，我会告诫不要使用!important 规则，因为如果您需要，它们以后会变得非常难以覆盖。相反，我建议增加正在编写的规则的特异性，因此您根本不需要使用!important。你未来的自己会为此感谢你的。

【讨论】：