Question

我在Chrome扩展程序中使用React，我需要通过内容脚本将元素插入到页面中。扩展可以将这些元素插入到加载它的任何页面中（有点类似Last Pass），所以我需要覆盖任何可能针对一般元素的现有样式。

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

正如我刚刚了解到的那样，遗憾的是无法使用带有内联React CSS的！important功能。我可以理解为什么会这样，但对于使用内容脚本的Chrome Extensions，我需要能够使用重要的标签......

我一直在找工作并设法找到这个：

react-with-important-style

但是无论何时组件呈现它看起来都不是很平滑，所以寻找另一种选择。

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

由于

Answer 1

我不能说这是一个很好的解决方法，因为它使用refs（内联），但它可以解决问题。您只需将此下面的代码段作为内联属性插入即可如post

中所述

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

此外，还有针对早期版本的ReactJS的攻击，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>

如果没有任何作用，那么这个问题的完美解决方案就是创建一个custom.css文件，导入它并在那里写你的CSS ！重要（如果它很重要）

P.S：尽量避免使用！重要，因为在开发人员中这被认为是一种不好的做法，但偶尔我认为这是合法的。）。

希望它有所帮助。

React - 使用内联重要样式

1 个答案: