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

Question

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

谢谢

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

Answer 1

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

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

Answer 2

您可以对空格和逗号分隔值使用基于数组的语法。

只需这样做：

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

Answer 3

您可以使用与在 css 中相同的内联方式设置!important样式。

在下面的例子中，两个 div 在 css 中都是blue !important

 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>