using css modules how do I define more than one style name

Question

I am trying to use multiple classes for an element using css modules. How do I do this?

function Footer( props) {     const { route } = props;     return (         <div className={styles.footer}>             <div className={styles.description, styles.yellow}>               <p>this site was created by me</p>             </div>             <div className={styles.description}>               <p>copyright nz</p>             </div>         </div>     ); } 

Answer 1

You can add multiple classes using css modules as follows:

className={`${styles.description} ${styles.yellow}`} 

e.g.

function Footer( props) {     return (         <div className={styles.footer}>             <div className={`${styles.description} ${styles.yellow}`}>               <p>this site was created by me</p>             </div>         </div>     ); } 

Using react-css-modules you can use normal class name syntax:

<div styleName='description yellow'>

and you specify allowMultiple: true for multiple classes

Answer 2

You can use an array that will be joined with a space. i.e

<div className={[styles.App, styles.bold, styles['d-flex-c']].join(' ')}> 

I prefer this to using template literals like @steven iseki suggested because it is easier to add and remove classes without having to wrap them in ${} every single time.

But if you're for some reason adding a lot of classes to a lot of elements you can write a higher order function to make it easier

import React from 'react'; import styles from './Person.module.css';  console.log(styles); // sample console output => // { //   App: 'App_App__3TjUG', //   'd-flex-c': 'App_d-flex-c__xpDp1', // }   // func below returns a function that takes a list of classes as an argument // and turns it in an array with the spread operator and reduces it into a spaced string  const classLister = styleObject => (...classList) =>   classList.reduce((list, myClass) => {     let output = list;     if (styleObject[myClass]) {       if (list) output += ' '; // appends a space if list is not empty       output += styleObject[myClass];        //Above: append 'myClass' from styleObject to the list if it is defined     }     return output;  }, '');  const classes = classLister(styles);  // this creates a function called classes that takes class names as an argument // and returns a spaced string of matching classes found in 'styles' 

Usage

<div className={classes('App', 'bold', 'd-flex-c')}> 

Looks very neat and readable.

When rendered to the DOM it becomes

<div class="App_App__3TjUG App_d-flex-c__xpDp1"> /* Note: the class 'bold' is automatically left out because    in this example it is not defined in styles.module.css     as you can be observe in console.log(styles) */ 

As expected

And it can be used with conditionals by putting the conditionally generated classes in an array that is used as an argument for classes via ... spread operator

In fact while answering this I decided to publish an npm module because why not.

Get it with

npm install css-module-class-lister