Michael Jones Michael Jones - 3 months ago 9
React JSX Question

Element with two classes under className

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

The styles are just string, 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(' ') }>
Comments