How to apply global styles with CSS modules in a react app?

Question

I'm currently using CSS Modules with React for my styling. So each of my components is importing in it's component specific css file, like so:

import React from 'react'; import styles from './App.css';  const example = () => (   <div className={styles.content}>     Hello World!   </div> );  export default example; 

This works fine when styling individual components, but how do I apply global styling (html, body, header tags, divs, etc.) that isn't component specific?

Answer 1

Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet

import './App.css' 

Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)

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