如何在 React 中添加 !important 的行内样式? | 您所在的位置:网站首页 › css的important怎么用 › 如何在 React 中添加 !important 的行内样式? |
配图源自 Freepik
不知道你有没有发现,在 React 中是无法给行内样式添加 !important 权重的。 // not worked export default function App() { return ( React App ) }如果非要用,可以用 Callback Refs 处理,比如: // worked export default function App() { return ( el && el.style.setProperty('font-size', '30px', 'important')} > React App ) }相关讨论可看: Support !important for styles? #1881 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。 |
CopyRight 2018-2019 实验室设备网 版权所有 |