javascript - 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