如何将 !important 添加到 CSS-in-JS (JSS) 类属性？答案

【问题标题】：How do you add !important to a CSS-in-JS (JSS) class property?如何将 !important 添加到 CSS-in-JS (JSS) 类属性？
【发布时间】：2019-06-28 19:38:25
【问题描述】：

我正在尝试在我的 React 项目中使用来自 this answer 的一些 CSS-in-JS 类和一个材质 UI 组件。我需要覆盖来自 Bootstrap 的 CSS，所以我想使用 !important 修饰符，我之前只在 .css 文件中使用过它，我不确定如何在 CSS-in-JS 中做到这一点。我要传递给 Material-UI withStyles 函数的样式对象如下所示，如何将 !important 添加到 fontSize 属性？我尝试了30 !important 和其他一些方法，但似乎没有任何效果。

谢谢

const styles = {
  labelRoot: {
    fontSize: 30
  }
}

【问题讨论】：

你不使用重要的
@AdrianBrand 所以你不能在内联 CSS 中使用重要？它会自动成为最重要的吗？
内联样式在文档中具有最高的优先级或特异性
stackoverflow.com/questions/23074748/…
@AdrianBrand - 一个具有!important 胜过内联的css规则

标签： javascript html css reactjs material-ui

【解决方案1】：

正如 Adrian 指出的那样，您不需要这样做，但如果您绝对需要这样做，您可以将其设置为字符串：

const styles = {
  labelRoot: {
    fontSize: '30px !important',
  },
};

【讨论】：

【解决方案2】：

您可以像在 css 中一样内联设置 !important 的样式。

在下面的示例中，两个 div 在 css 中的样式为 blue !important，但粉红色的 div 也很重要，因此具有优先权。

div {
  width: 200px;
  height: 200px;
  background: blue !important;
  flex:1;
}
section{display:flex;}

<section>
  <div style="background: red;"></div>
  <div style="background: pink !important;"></div>
</section>

【讨论】：

【解决方案3】：

您可以将array-based syntax 用于空格和逗号分隔的值。

这样做：

const styles = {
  labelRoot: {
    fontSize: [[30], '!important'],
    margin: [[5, 10], '!important']
  }
}

【讨论】：