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

css reactjs css-modules react-css-modules
Chase James picture Chase James · Feb 12, 2017 · Viewed 10k times · Source

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.css I want to have a class like so:

.main .main_in_logo {
 color: red;
}

But with CSS Modules I am unable to do this, any ideas on a work around?

Answer

Dmitriy Kovalenko picture Dmitriy Kovalenko · Feb 12, 2017

Why you need to create .main .main_in_logo - the main idea of styles with parent elements its not to broke your css with other styles in the future. But its impossible with css modules, because your styles will be unique forever.

But even you really need it you can use global css for these 2 components - documentation about global css for react-css-modules.

Related questions

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 …

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