我正在尝试将此答案中的一些 CSS-in-JS 类与我的 React 项目中的材质 UI 组件一起使用。我需要覆盖来自 Bootstrap 的 CSS，所以我想使用 !important 修饰符，我之前只在 .css 文件中使用过它，我不确定如何在 CSS-in-JS 中做到这一点。我要传递给 Material-UIwithStyles函数的样式对象如下所示，如何将 !important 添加到 fontSize 属性？我已经尝试过30 !important和其他一些事情，但似乎没有任何效果。
谢谢
const styles = {
labelRoot: {
fontSize: 30
}
}
正如 Adrian 指出的那样，您不需要这样做，但如果您绝对需要这样做，您可以将其设置为字符串：
const styles = {
labelRoot: {
fontSize: '30px !important',
},
};
您可以对空格和逗号分隔值使用基于数组的语法。
只需这样做：
const styles = {
labelRoot: {
fontSize: [[30], '!important'],
margin: [[5, 10], '!important']
}
}
您可以!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>