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(' ') }>