How to add two styles in react?-CodePudding

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

CodePudding user response：

Just use string interpolation className={`${Styles.headerbtn} ${Styles.headerbtnchat}`}

Or look at special libraries e.g. classnames

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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