Элемент с двумя классами под классомName

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