css-modulesreact-css-modulesbabel-plugin-react-css-modules

CSS Modules and multiple class names with tags

What do I do when I run across this?

<div className="ui row myClass">

If myClass was the only class I would import the relevant style sheet and do this:

<div className={styles.myClass}>

This syntax does not work (not surprising) and I am not sure what to do:

<div className="ui row" {styles.myClass}>

Should I just boil it down to a class without tag selectors?

Solution

  • I may have misunderstood you, but if I got you right, what I'd do is simply using template literals, like so:

    <div className={`ui row ${styles.myClass}`}>

    Take into account, in the end, React components are just JS. That's the beauty of them. Just remember: now any JS expression, like props, etc., has to be with $ sign (between ${} instead of just {}).