☰

CSSモジュールを使用して複数のスタイル名を定義するにはどうすればいいですか？質問する

tag-icon • tag-icon javascript css reactjs
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>
    );
}

ベストアンサー1

次のように 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-モジュール通常のクラス名構文を使用できます:

<div styleName='description yellow'>

allowMultiple: true複数のクラスを指定する場合

おすすめ記事