Here is a createStyles statement in my code:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
menuOpen: {
zIndex: 1,
width: 200,
height: '100%',
position: 'fixed',
top: 48,
transition: 'left .1s',
marginRight: theme.spacing(2),
left: 0,
background: '#3f51b5',
'& div:first-element': {
marginTop: 100
}
},
menuClose: {
zIndex: 1,
width: 200,
height: '100%',
position: 'fixed',
top: 48,
transition: 'left .1s',
marginRight: theme.spacing(2),
left: -200,
background: '#3f51b5',
'& div:first-element': {
marginTop: 100
}
},
}),
);
I'm toggling between these to open or close a menu using a useState variable. Both styles share common attributes. How can I create a menu style that both can inherit from?
Edit:
It seems like the transition is not working as expected. Could it be because React is reloading those DOM elements? I attempted adding transitions in both the menuClose and menuOpen styles, but the menu does not transition properly.
Following @doglozano's answer, I modified my createStyles function with the following:
// I also tried placing the transition in a div wrapper
// but it seems like that element is getting overridden as well
toolBar: {
'& div': {
transition: 'left .1s'
}
},
menu: {
zIndex: 1,
width: 200,
height: '100%',
position: 'fixed',
top: 48,
transition: 'left .1s',
marginRight: theme.spacing(2),
left: -200,
background: '#3f51b5',
'& div:first-element': {
marginTop: 100
}
},
menuOpen: {
left: 0,
transition: 'left .1s',
},
menuClose: {
left: -200,
transition: 'left .1s',
},
When the menu is closed:
.makeStyles-menuClose-7 {
left: -200px;
transition: left .1s;
}
.makeStyles-menu-5 {
top: 48px;
left: -200px;
width: 200px;
height: 100%;
z-index: 1;
position: fixed;
background: #3f51b5;
transition: left .1s;
margin-right: 16px;
}
.makeStyles-toolBar-4 {
transition: left .1s;
}
When the menu is open:
.makeStyles-menuOpen-6 {
left: 0;
transition: left .1s;
}
.makeStyles-menu-5 {
top: 48px;
left: -200px;
width: 200px;
height: 100%;
z-index: 1;
position: fixed;
background: #3f51b5;
transition: left .1s;
margin-right: 16px;
}
.makeStyles-toolBar-4 {
transition: left .1s;
}
Edit 2: Here is my Sandbox link.
Any suggestions?