Does anyone know how to style the root in React? I know it can be done in JQuery by executing the following;

$(":root").css("background-color", "yellow");

Does anyone know how to style the root in React? I know it can be done in JQuery by executing the following;

$(":root").css("background-color", "yellow");

• javascript
• css
• reactjs

• 2 Why not just style your root ponent, instead of the root mount point? – Blue Commented Oct 17, 2018 at 13:25

2 Answers 2

Here is an example,App is my root element.

import './App.css';
class App extends Component {

  render() {
    const backStyle = style({
      background: 'black'
    })
    return (
      <div className={backStyle}>
      ...
      </div>
    );
  }
}

export default App;

You define the css properties like background-color in App.css. And there are many ways to do that.

return (
  <div style={{background: black}}>
  ...
  </div>
);

Define the style of the root is quite similar.i.e

import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

You can do one thing. In your index.html you can use style tags to style root div. It will do what you are trying to do. As all the ponents are loaded within the root wrapper, so it will be like a global style.