javascript - React - 使用内联重要样式

Question

我在 Chrome 扩展中使用 React，我需要通过内容脚本将元素插入页面。扩展程序可能会将这些元素插入到加载它的任何页面中(有点像 Last Pass)，因此我需要覆盖可能针对通用元素的任何现有样式。

在大多数情况下，我已经设法通过使用 iframe 来解决这个问题，因为 iframe 中的 css 无法修改，但我需要为 iFrame 和一两个父容器提供样式，以便它们正确显示。

据我所知，不幸的是，您无法使用内联 React CSS 的 !important 功能。我也许可以理解为什么会这样，但是对于使用内容脚本的实时 Chrome 扩展，我需要能够使用重要的标签...

我一直在寻找解决方法并设法找到了这个:

react-with-important-style

但是每当组件渲染时，它看起来都不是很平滑，因此需要寻找其他选项。

有人可以推荐一个好的解决方法吗？

谢谢

Answer 1

我不能说这是一个很好的解决方法，因为它使用引用(内联)，但它可以解决问题。您可以简单地将下面的代码片段作为内联属性插入如本post中所述

ref={(el) => {
      if (el) {
        el.style.setProperty('background-color', color, 'important');
      }
    }
}

此外，ReactJS 的早期版本有一个 hack，即 zpao发布。即

style = {
  color: 'red',
  backgroundColor: {
    value: 'blue',
    important: 'true'
  }
}

另一种方法是这样的:

<style>{"\
i{\
float:none !important;\
}\
"}</style>

在 JSX 中使用上述代码，如下所示:

 let activityStats = <table className="table" id="act-stats-user">
        <style>{"\
            i{\
              float:none !important;\
            }\
          "}</style>
        <tbody>
          ...
        </tbody>
        </table>

If nothing works, then the perfect solution to this problem is tocreate a custom.css file, import it and write your CSS there with!important (if it`s that important)

<小时/>

P.S:尽量避免一直使用 !important，因为这在开发人员中被认为是一种不好的做法，但我认为偶尔它是合法的:)。