你如何添加！重要的CSS-in-JS（JSS）类属性？ [英] How do you add !important to a CSS-in-JS (JSS) class property?

问题描述

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

I am trying to use some CSS-in-JS classes from this answer with a material UI component in my React project. I need to override the CSS coming from Bootstrap so I want to use the !important modifier, I've only used this in .css files before and I'm unsure how to do it in CSS-in-JS. My styles object to be passed into the Material-UI withStyles function looks like the following, how do I add !important to the fontSize attribute? I've tried 30 !important and a few other things but nothing seems to work.

谢谢

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

推荐答案

你可以设置样式！important 与你在css中内联的方式相同。

You can style !important the same way inline that you would in css.

在下面的例子中，两个div的样式都是 blue！important 在css中，但粉色div也很重要，因此优先。

In the below example, both divs are styled blue !important in css, but the pink div has important also inline, and so takes precedence.

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>

这篇关于你如何添加！重要的CSS-in-JS（JSS）类属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！