CODEWITHSUNDEEP
htmlcssnode.jsreactjs
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

Two classes on single react HTML element

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?

Upvotes: 1

Views: 879

Answers (3)

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11001

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

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

Upvotes: 1

Ridvan BEAU
Ridvan BEAU

Reputation: 26

Are you sure you used quotes ? Like such as :

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

Upvotes: 0

Amit
Amit

Reputation: 1143

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.

Upvotes: 2

Related Questions