classNameの下に2つのクラスがある要素

Question

私はこの回答をどこにも見つけることができません！基本的に私はCSSモジュールを使用しており、ファイルをインポートしています。ここでは、CSSファイルの例です。ここでは、その後

.class1 { 
    ... 
} 
.class2 { 
    ... 
} 

そして、私は私のJSファイルで、これまで持っているものです。

import styles from './header.scss'; 
export const Header =() => (
    <div className={styles.class1}> 
    ... 
    </div> 
); 

私はclassNameに2つのクラスを追加する方法がわかりません、次のように動作しません。

import styles from './header.scss'; 
export const Header =() => (
    <div className={styles.class1, styles.class2}> 
    ... 
    </div> 
); 

2つのクラスを1つの要素にまとめるにはどうすればよいですか？

Answer 1

スタイルは文字列だけなので、あなたがテンプレートや文字列の連結を使用することができます。

<div className={ `${styles.class1} ${styles.class2}` }> 

または

<div className={ styles.class1 + ' ' + styles.class2 }> 

または

<div className={ [styles.class1, styles.class2].join(' ') }>