如何使用 Material-UI useStyles 制作条件类？

Question

I am trying to reproduce this logic but using material-ui useStyle

<div className={'container ' + (state.unlocked ? 'containerUnlocked' : '')}>  

I imagined it would be something similar to this:

<div className={`${classes.container} + ${state.unlocked} ? ${classes.spacious} : ''`}>  

But it doesn't work.

Answer 1

This seems to work:

<div className={`${classes.container} ${(condition) ? classes.classTrue : classes.classFalse }`}>

Answer 2

material-ui comes with clsx , which can be used to add classes optionally. just import it and use it.

import clsx from 'clsx'
...


<div className={clsx(classes.container, {[classes.spacious]:state.unlocked})}>