Two classes on single react HTML element

Question

I feel like there is a simple answer here, but I'm not finding it -

In my react header I import my stylesheet under 'styles' and as such refers to css classes as

<div className={styles.selectorname}>

But I can't figure out, with this notation, how to declare multiple styles on one element. Example that doesn't work:

<div className={styles.selectorname1} {styles.selectorname2}>

Any ideas?

`className={{styles. selectorname1, styles.selectorname2}}` doesn't work? — Siri, May 06 '22 at 17:04
You can't do this with classes. You have to use the `styles` attribute along with spread syntax to get this done. — Amit, May 06 '22 at 17:20

score 2 · Answer 1 · answered May 06 '22 at 17:14

You can use spread operator to combine different style objects. For an example, let's have a look at this css file which has few declarations.

.myColor {
  color: DodgerBlue;
}

.myFont {
  font-family: Arial;
  text-align: center;
}

We can combine these using the following syntax.

<div style={{...styles.myColor, ...styles.myFont}}>

Similarily, you can use the following code to combine those styles. The styles can be from two different files as well.

<div style={{...styles.selectorname1, ...styles.selectorname2}}>

Note: The ... which we are using is called spread operator. Read more on spread syntax here.

score 1 · Accepted Answer · answered May 06 '22 at 18:12

1

If those are class names, then you can do with template strings (``)

<div className={`${styles.selectorname1} ${styles.selectorname2}`}>

answered May 06 '22 at 18:12

Siva K V

score 0 · Answer 3 · answered May 06 '22 at 17:21

0

Are you sure you used quotes ? Like such as :

<div className="{styles.selectorname1} {styles.selectorname2}">

answered May 06 '22 at 17:21

Ridvan BEAU

This won't work. `"{styles.selectorname1} {styles.selectorname2}"` is a string. You're not embedding those values into the string. To embed the value, you can use a string literal. – Amit May 06 '22 at 17:23
In `jsx` syntax, curly braces (`{` `}`) are used when providing an expression or a reference, while single/double quotes (`"` or `'`) are used when providing a string directly. (see [this SO answer](https://stackoverflow.com/a/43904857/7216508)) – Bumhan Yu May 06 '22 at 17:29
Amit, you can't use two CSS class without quotes on a SGML and HTML. You must delimite classes if you want to combine. https://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2 – Ridvan BEAU May 10 '22 at 15:00

3 Answers3