Sometimes, we want to define more than one style name using CSS modules with React.
In this article, we’ll look at how to define more than one style name using CSS modules with React.
How to define more than one style name using CSS modules with React?
To define more than one style name using CSS modules with React, we can put them class names in one string.
For instance, we write
function Footer(props) {
return (
<div className={styles.footer}>
<div className={`${styles.description} ${styles.yellow}`}>
<p>this site was created by me</p>
</div>
</div>
);
}
to set the className prop of the inner prop to
`${styles.description} ${styles.yellow}`
to apply multiple classes imported from the CSS module.
Conclusion
To define more than one style name using CSS modules with React, we can put them class names in one string.
