CODEWITHSUNDEEP
reactjs
Asmath S
Asmath S

Reputation: 31

How to add two styles in react?

i need to give two class Name when i give

       <p
            className={Styles.headerbtn, Styles.headerbtnchat}
            disableElevation
          >
            <img src="/assets/images/Chat_Bubble.png" alt="" />
            <span className={Styles.headerbtntxt}>Chat us</span>
          </p>

like this it shows some error.

Im trying to multiple classname

Upvotes: 0

Views: 114

Answers (4)

Evgeny K
Evgeny K

Reputation: 3187

The className prop accepts a string as input.

You can use template literals for string interpolation.

className={`${Styles.headerbtn} ${Styles.headerbtnchat}`}

This way, if you wanted to add more classnames that are not variables you could write it like: className={`another_class ${Styles.headerbtn} ${Styles.headerbtnchat}`}

Or look at special libraries e.g. classnames

Upvotes: 2

Noman Zahid
Noman Zahid

Reputation: 21

Update code with the following snippets

   <p className={Styles.headerbtn + ' ' + Styles.headerbtnchat}
     disableElevation>
      <img src="/assets/images/Chat_Bubble.png" alt="" />
       <span className={Styles.headerbtntxt}>Chat us</span>
        </p>

Upvotes: 1

Priyen Mehta
Priyen Mehta

Reputation: 1185

Use this library classnames and try like this,

 <p
        className={classNames(classes.headerbtn, classes.headerbtnchat)}
        disableElevation
      >
        <img src="/assets/images/Chat_Bubble.png" alt="" />
        <span className={Styles.headerbtntxt}>Chat us</span>
      </p>

Upvotes: 1

theemee
theemee

Reputation: 834

className={`${Styles.headerbtn} ${Styles.headerbtnchat}`}

Upvotes: 0

Related Questions