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

Posted 2023-02-22

【中文标题】如何将 !important 添加到 CSS-in-JS (JSS) 类属性？

【英文标题】：How do you add !important to a CSS-in-JS (JSS) class property?

【发布时间】：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 中使用重要？它会自动成为最重要的吗？

内联样式在文档中具有最高的优先级或特异性

***.com/questions/23074748/…

@AdrianBrand - 一个具有!important 胜过内联的css规则

【参考方案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;

sectiondisplay: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']