I am trying to use the Material UI Drawer and wish to add a class named "paperStyle" to the classes prop with the rule name "paper" and then, under certain conditions, apply an additional class called "specialPaperStyle" for specific users. However, I have struggled to assign two classes to the paper rule, let alone conditionally apply it. Does anyone have any suggestions on how to solve this issue?
Highlighted below are the main portions of my code:
Styles
const useStyles = makeStyles(theme => ({
paperStyle: {
width: drawerWidth,
boxShadow: 'inset 0 0.3rem 1.5rem rgba(0,0,0,0.19)',
color: theme.palette.primary.main,
[theme.breakpoints.up('lg')]: {
minHeight: '100%',
position: 'relative',
},
},
specialPaperStyle: {
backgroundImage: 'linear-gradient(to bottom right, #27133f, transparent)',
},
}));
Material UI Drawer
<Drawer
classes={{
paper: classes.paper,
}}
>
Contents of drawer
</Drawer>
The current setup successfully applies my paperStyle class, but how do I go about conditionally applying the specialPaperStyle class to paper? For example:
Attempted Solution:
<Drawer
classes={{
paper: {`${classes.paperStyle isSpecial && $classes.specialPaperStyle}`},
}}
>
Contents of drawer
</Drawer>
Thank you in advance,
Katie