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.
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>