Multiple classNames with CSS Modules and React

reactjs css-modules
Toby picture Toby · Jul 14, 2016 · Viewed 28.5k times · Source

I'm using the following code to dynamically set a className in a React component based upon a boolean from props:

<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>

However, I'm also using CSS Modules, so now I need to set the className to:

import styles from './styles.css';

<div className={styles.sideMenu}> ... </div>

I'm having trouble with this - I tried using classnames to gain more control with multiple classes, but because I need the end result to be that the className is set to both styles.sideMenu AND styles.active (in order for CSS Modules to kick in) I'm unsure how to handle this.

Any guidance greatly appreciated.

Answer

Chris picture Chris · Jul 14, 2016

Using classnames and es6:

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

Using classnames and es5:

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');

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 to import CSS modules with Typescript, React and Webpack

How to import CSS modules in Typescript with Webpack? Generate (or auto-generate) .d.ts files for CSS? And use classic Typescript import statement? With ./styles.css.d.ts: import * as styles from './styles.css' Import using require Webpack function? …

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