Search code examples
cssreactjscss-modulesreact-css-modules

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

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?

Solution

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