您如何添加！重要的CSS-in-JS (JSS)类属性？

Question

我正在尝试使用来自这个答案的一些CSS类，并在我的React项目中使用一个重要的UI组件。我需要覆盖来自引导程序的CSS，所以我想使用！重要修饰符，我以前只在.css文件中使用过，我不知道如何在coming中这样做。我的样式对象要传递到Material withStyles函数中，如下所示，我如何添加！对fontSize属性很重要？我尝试过30 !important和其他一些东西，但是似乎没有什么效果。

谢谢

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

Answer 1

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

在下面的示例中，这两个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>

​

Answer 2

您不应该像禤浩焯指出的那样这样做，但是如果您确实需要这样做，您可以将其设置为字符串：

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

Answer 3

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

就这么做吧：

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