[React]MaterialUIのuseStylesを使って複数のクラス名を要素に付与する

useStylesを使用し１つの要素にクラス名を複数含めたい場合

import { makeStyles } from "@material-ui/core";
// スタイルの記述をする
const useStyles = makeStyles(theme => ({
   container: {        
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
       width: '100%',
       // borderBottom: `thin solid ${theme.palette.primary.main}`,
       // backgroundColor: '#888888',
   },
   videos: {
       display: 'none',
       justifyContent: 'space-between',
       '& div': {
           display: 'flex',
           flexDirection: 'column-reverse',
           alignItems: 'center',
       },
   },
   active: {
       display: 'flex',
   },
}));

...
<div className={`${classes.videos} ${isJoinedIn ? classes.active : ''}`}>

上の場合isJoinedIn=trueならクラスがclass="videos active"となる。