美文网首页
如何在 React 中添加 !important 的行内样式?

如何在 React 中添加 !important 的行内样式?

作者: 越前君 | 来源:发表于2023-02-24 14:06 被阅读0次
    配图源自 Freepik

    不知道你有没有发现,在 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>
      )
    }
    

    相关讨论可看:

    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,你可以:
      1. 更好地利用 CSS 级联属性
      2. 使用更具体的规则。在您选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
      3. 对于(2)的一种特殊情况,当您无其他要指定的内容时,请复制简单的选择器以增加特异性。

    以上摘自 MDN

    相关文章

      网友评论

          本文标题:如何在 React 中添加 !important 的行内样式?

          本文链接:https://www.haomeiwen.com/subject/zqwvhdtx.html