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

Question

不知道你有没有发现，在 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。