javascript - Add multiple styling class to object on React Material-UI

Question

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 = {
   btncolor:{
      backgroundColor:"#0E122D"
   }
}
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.

标签： javascriptreactjsmaterial-ui

Answer 1

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

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

ALTERNATIVE SOLUTION:
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>
</span>