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

css reactjs css-modules react-css-modules
hidace picture hidace · Oct 1, 2016 · Viewed 78.9k times · Source

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

felixyadomi picture felixyadomi · Oct 16, 2016

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

Related questions

CSS Modules & ReactJS: Parent and child CSS classes in different components

So I am building a react application and have a quick question. If I have two separate components: and with CSS classes navigation.css and navigationLogo.css respectively. In navigation.css I have a class named .main and in navigationLogo.…

Read More
How I can use refs to change styling class in ReactJS?

I'm trying to change background of a div when color value changes. Here is my function which receives color value: ChangeColor(oColor) { this.props.ChangeColor(oColor); console.log("Refs: ", this.refs.colorPicker.className); }, Here is css class .colorPicker { padding-right: 25px; …

Read More
Sass with CSS Modules & Webpack

I've been building a project for a while using Webpack, Sass, and CSS modules. Normally in my .scss files, I define a class like: :local(.button) { color: white; } and in my React components, in the render method, I require the …

Read More