javascript - 如何使 React 组件更改全局 CSS

Question

我正在使用 react-redux 构建一个 Chrome 扩展，我想在全局范围内注入(inject) CSS 逻辑。

我试图通过让组件导入全局 CSS 文件来实现这一点，但它不起作用。

styler.js

import React, { Component } from 'react';

require('./styler.css');

class Styler extends Component {
  render(){
    return (
      <div />
    )
  }
}

export default Styler;

styler.css

:global(.myclass) {
  background-color: red;
}

我刚收到一个导入错误。有没有办法让 React 元素(或组件)全局注入(inject) CSS？

Answer 1

您可以使用 repo 的示例:https://github.com/orbitbot/chrome-extensions-examples还有https://developer.chrome.com/extensions/samples

1. js改css示例:

  chrome.tabs.executeScript(null,
      {code: "document.body.style.backgroundColor="'"red"'"});

1. 或使用 insertCSS:https://developer.chrome.com/extensions/tabs#method-insertCSS

使用示例:Insert CSS from Chrome Extension