Add multiple styling class to object on React Material-UI [closed]

I have JSX like this:

 <span className="btn-pause btn"><i class="fa fa-pause"></i></span>

Now I want to change the color of this button:

const styles = {
const useStyles = makeStyles(styles)

How should I add this style to className with normal other class?

 <span className="btn-pause btn {{classes.btncolor}}"><i className="fa fa-pause"></i></span>

It doesn’t work.


You are adding color variable under quotes. Here is corrected answer:

<span className={`btn-pause btn ${classes.btncolor}`}>
  <i className="fa fa-pause"></i>

For managing class assigning you can use library classnames. The way you use it in your case would be like this:

import classnames from 'classnames';

<span className={classnames("btn-pause", "btn", classes.btncolor)>
  <i className="fa fa-pause"></i>