Question

我正在尝试将this answer中的一些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

您可以像在CSS中一样使用npm install -g npx内联样式。

在下面的示例中，两个div都在css中设置为!important样式，但是粉红色div也很重要，而且也是内联的，因此优先。

blue !important

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

Answer 2

您不必像Adrian所指出的那样执行此操作，但是如果您绝对需要执行此操作，则可以将其设置为字符串：

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

Answer 3

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

只需执行以下操作：

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

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

3 个答案: