如何在CSS-in-JS（JSS）类属性中添加！important？

Question

我正在尝试将这个答案中的一些CSS-in-JS类与React项目中的重要UI组件一起使用。我需要覆盖来自Bootstrap的CSS，所以我想使用！important修饰符，我以前仅在.css文件中使用过它，并且不确定如何在CSS-in-JS中使用它。我的要传递给Material-UI withStyles函数的样式对象如下所示，如何在fontSize属性中添加！important？我已经尝试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

您可以!important像在CSS中一样使用内联样式。

在下面的示例中，两个div均blue !important使用css 样式设置，但是粉红色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>