166

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

15 Answers 15

334

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

5
  • 1
    You could use ES2015 syntax. It would be ${styles.class1} ${styles.class2}
    – Golinmarq
    Apr 17, 2017 at 22:29
  • seems that in last version of react-create-app it doesn't work anymore, it triggers: " No duplicate props allowed "
    – CodingWeb
    Jan 19, 2019 at 18:45
  • 3
    Please, can you say concretely , where should we add allowMultiple: true ? I couldn't find anything related to it Feb 25, 2019 at 11:29
  • @NorayrGhukasyan export default CSSModules(Footer, styles, {allowMultiple: true} ) check here
    – svnm
    Mar 6, 2019 at 3:25
  • 1
    I don't think this works if you pull another className from props from another module. Only the module I got from props is used: {${styles.whatever} ${className}}. styles.whatever is ignored.
    – Isaac Pak
    Nov 11, 2022 at 20:03
51

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
5
  • 1
    Awesome. Thank you so much. Dec 18, 2019 at 18:59
  • why not just className={${styles.description} ${styles.yellow}} as svnm suggested ??? Mar 23, 2020 at 9:14
  • 1
    @VladyslavGoloshchapov "because it is easier to add and remove classes without having to wrap them in ${} every single time". Jun 10, 2020 at 16:55
  • This is exactly what I was looking for. I figured out about array, but was wondering how to transform comma separated to space separated. Your answer just came in handy. Thanks :) Jul 18, 2022 at 17:40
  • How can I have a css style like this .box.large { ... } applied to a component?
    – Qwerty
    Sep 17, 2022 at 18:27
32

I highly recommend using the classnames package. It's incredibly lightweight (600 bytes minified) and has no dependencies:

import classnames from 'classnames';

Function footer(props) {
  ...
  <div className={classnames(styles.description, styles.yellow)}>
}

It even has the added benefit of being able to conditionally add class names (for example, to append a dark theme class), without having to concatenate strings which can accidentally add an undefined or false class:

  <div className={classnames(styles.description, {styles.darkTheme: props.darkTheme })}>
11

You should add square brackets to make the classNames an array, and to remove ',' add join().

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

you can use string concatenation with space(' ') ->

import classes from '../path/to/fileName.module.css'
<div className={classes.centerFlexY + ' ' + classes.searchTabs} />

className is nothing but a prop which we are passing, and this prop require a string value so we can use every single code which results in string inside {} block of className:

<div className={`${classes.imported} normalCssClass ${classes.another}`}
4

This can get out of hand quickly:

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

I like creating a function that sets the class and call that:

const setClass = (classes: string[]) => {
    return classes.map((className) => styles[className]).join(" ");
  };
<article className={setClass(["student", "student-expand-view-layout"])}>
0
3

If you're using the classnames package and you want to apply a style conditionally, you need to use a dynamic property key with brackets, like this:

<div className={classNames(styles.formControl, { [styles.hidden]: hidden })}>
</div>
2

As an addition to Yuan-Hao Chiang's answer, the following function makes it even easier to work with:

const classes = (classNames: Array<string> | string): string => classnames((Array.isArray(classNames) ? classNames : classNames.split(' ')).map(x => styles[x]));

What this does is take either an array or a string (which is then split into an array of strings), and returns a final class name (scoped to the current module since it uses the imported styles object of course).

You use it like this:

<div className={classes(['description', 'dark-theme', 'many', 'more', 'class-names'])}>

Or if you prefer, specify a single string (handy in case of using many classes when e.g. using TailwindCSS):

<div className={classes('description dark-theme many more class-names')}>
2

The best solution for my case is the function bellow. 'Cause with the aruments destructuring I can return the classes with spaces.

export function clx(...classes) {
  return classes.join(" ");
}
// className={clx('border', styles.form, styles.h1, 'classe-4')}
// class="border form_CDE h1_AB"
0
1

You can add multiple classes using css modules as follows:

className={styles.description + ' ' + styles.yellow}
1

Thanks to Royer Adames, I would like to suggest this solution

const joinClasses = (...classes: string[]) => {
    return classes.map((className) => styles[className]).join(" ");
};

<article className={joinClasses("student", "student-expand-view-layout")}>
0

for combine class names in front of className property, you can use "clsx", using this package is easy

import clsx from 'clsx';
// Strings
clsx('foo', 'bar', 'baz'); // 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:true });// 'foo baz'

you can find the package from this address: https://github.com/lukeed/clsx

0

Install classnames package to join classNames together

npm install classnames --save

Solution:

import cx from 'classnames';

Function footer(props) {
 ...
 <div className={cx(styles.description, styles.yellow)}>
}
0

Simply do

<div className={style.smallFont + " " + style.yellowColor}>

string concatination

-2

Why you don't define an additional class with the multiple styles? like

div .descyellow{
  background_color: yellow;
  style...
}

and then

<div class="descyellow">
1
  • 2
    css modules gives me a good chance to separate css classes and they are automatically unique due to hashing in the css loader. You are right this yellow class probably wasn't a good example as I think I will pass the color from a list of variables now using simple vars plugin I just wondered how you can do it?
    – Navela
    Nov 27, 2015 at 2:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.