不知道你有没有发现,在 React 中是无法给行内样式添加 !important
权重的。
// not worked
export default function App() {
return (
<div className="app" style={{ fontSize: '30px !important' }} >
React App
</div>
)
}
如果非要用,可以用 Callback Refs 处理,比如:
// worked
export default function App() {
return (
<div
className="app"
ref={el => el && el.style.setProperty('font-size', '30px', 'important')}
>
React App
</div>
)
}
相关讨论可看:
To be fair, the ref solution doesn’t help for server rendering. Again, if you have a particular API proposal, sending an RFC would be a better place to discuss it. Thank you! commented by dan
为什么 React 不支持呢?
首先,这需求的实现是没有任何技术难度的。但 React 为什么不做呢,个人猜测可能是开发者滥用 !important
处理样式样式优先级。虽说如此,但理应支持,总会遇到「用魔法打败魔法」的场景的。
关于 !important 的一些看法:
当在一个样式声明中使用一个 !important
规则时,此声明将覆盖任何其他声明。虽然,从技术上讲,!important
与优先级无关,但它与最终的结果直接相关。使用 !important
是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important
规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
一些经验法则:
- 一定要优先考虑使用样式规则的优先级来解决问题而不是
!important
- 只有在需要覆盖全站或外部 CSS 的特定页面中使用
!important
- 永远不要在你的插件中使用
!important
- 永远不要在全站范围的 CSS 代码中使用
!important
- 与其使用
!important
,你可以:
- 更好地利用 CSS 级联属性
- 使用更具体的规则。在您选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
- 对于(2)的一种特殊情况,当您无其他要指定的内容时,请复制简单的选择器以增加特异性。
以上摘自 MDN。
网友评论