ClassName下有兩個類的元素

Question

我似乎無法在任何地方找到此答案！基本上我使用CSS模塊，並且我正在導入文件。下面是CSS文件的例子：

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

然後下面是我在我的JS文件至今：

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

我不知道如何將兩個類添加到className時，以下不起作用：

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

請幫忙，我該如何實現把兩個類放到一個元素上？

Answer 1

的風格僅僅是字符串，這樣你就可以使用模板或字符串連接：

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

或

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

或

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