javascript - 在 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>
);

请帮忙，我如何实现将两个类放在一个元素上？

score 3 · Accepted Answer

样式只是字符串，因此您可以使用模板或字符串连接：

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

或者

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

或者

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

1 回答 1