CSS Modules and multiple class names with tags

Question

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?

NTP · Accepted Answer · 2018-03-05 04:50:40Z

2

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 {}).

answered Mar 5, 2018 at 4:50

NTP

3991 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Francis Malloch Over a year ago

This is the normal way of doing it, there are libraries like "classNames" that assist you in completing this task.

smuggledPancakes Over a year ago

what would the syntax look like with classNames?

Collectives™ on Stack Overflow

CSS Modules and multiple class names with tags

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related