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