[解決済み] CSS モジュールを使って複数のスタイル名を定義する方法

質問

CSSモジュールを使って、ある要素に複数のクラスを使用しようとしています。どのようにこれを行うのですか？

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

どのように解決するのですか？

以下のように、cssモジュールを使って複数のクラスを追加することができます。

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

など

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

使用方法 react-css-modules を使えば、通常のクラス名構文を使うことができます。

<div styleName='description yellow'>

と指定し allowMultiple: true を複数のクラスに対して指定します。