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

Element with two classes under className