Multiple classnames with CSS Modules in React

If you want to use multiple classnames with CSS Modules in React, you can use the classnames package. At the time of writing, classnames has about 4.1 million downloads per week. This is how to use it:

1. First, let's install classnames. With npm:

   npm install classnames --save
   

   Or if you're using yarn:

   yarn add classnames
   

2. Then, import it into the component where you want to use multiple classnames. When importing it, I like to call it cx instead of classnames since it's less verbose.

   import cx from 'classnames'
   

3. Apply multiple classes like so:

   // Joining multiple CSS Modules classes
   <div className={ cx(styles.foo, styles.bar) } />
   

4. Or, conditionally apply classes like this:

   // Conditionally displaying multiple CSS Modules classes
   <div className={ cx(styles.foo, {[styles.bar]: false}) } />
   

   Obviously, instead of just false, you could pass a prop into that.

5. Using CSS Modules with classnames also gives us the ability to add some cool, prop-based logic to our components. Pay attention to styles[type] in this example:

   // Button.jsx
   import React from 'react'
   import cx from 'classnames'
   import styles from './Button.css'
   
   const Button = ({ type, text }) =>
     <button className={ cx(styles.button, styles[type]) }>
       { text }
     </button>
   

   /* Button.css */
   .button { /* common button styles here */ }
   .danger { background: red; }
   .save   { background: green; }
   

   Now we can pass in a type prop to call a CSS Modules class! For example...

   <Button type="danger" text="Delete Account" />
   

   ...would generate a button with both the .button and .danger styles.

And that's that! Using classnames with CSS Modules lets us easily combine classes and gives us access to powerful conditional style rendering.