How to make a React Component change global CSS

Question

I'm building a Chrome Extension with react-redux, and I want to inject CSS globally with logic.

I trying to do this by making a component import a global CSS file, but it's not working.

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;
}

I just get an import error. Is there a way for a react project (or component) to inject CSS globally?

Answer 1

You can use examples of the repo: https://github.com/orbitbot/chrome-extensions-examples also https://developer.chrome.com/extensions/samples

1. Example of changing css by js:

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

2. Or using insertCSS: https://developer.chrome.com/extensions/tabs#method-insertCSS

example of usage: Insert CSS from Chrome Extension