Element with two classes under className

Question

I can not seem to find this answer anywhere! Basically I am using CSS Modules, and I am importing the file. Here is an example of the CSS file:

.class1 {
  ...
}
.class2 {
  ...
}

And then here is what I have so far in my JS file:

import styles from './header.scss';
export const Header = () => (
  <div className={styles.class1}>
    ...
  </div>
);

I am not sure how to add two classes to className, the following does not work:

import styles from './header.scss';
export const Header = () => (
  <div className={styles.class1, styles.class2}>
    ...
  </div>
);

Please help, how do I achieve putting two classes on to one element?

Answer 1

The styles are just strings, so you can use templates or string concatenation:

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

or

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

or

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