Referencing another Rule in Material UI - material-ui

Question

I have the following code where I need to reference another rule name to avoid style duplication in material ui. Unfortunately the rules aren't reflecting.
const useNavStyles = makeStyles((theme) => ({
active: {
color: 'green'
},
listItem: {
borderTopRightRadius: 100,
borderBottomRightRadius: 100,
paddingBottom: 12,
paddingTop: 12,
backgroundColor: theme.palette.background.paper,
},
subListItem: {
"&$listItem": { // I wish to copy over the properties from the above listItem rule and only add padding to it, but it isn't working.
paddingLeft: theme.spacing(4),
},
},
How do I resolve this?
Thanks

Answer 1

Referencing a local rule name does not "copy over" other styles. It changes your selector. You will still need to apply all those classes to your elements, which in return will then also apply the respective styles.
listItem: {
color: 'hotpink',
},
subListItem: {
"&$listItem": {
fontWeight: 'bold'
}
}
this compiles to
.listItem-1: {
color: hotpink;
}
.subListItem-0.listItem-1: {
font-weight: bold;
}
In other words, this will apply styles to an element that has both these classes:
<div className={clsx(classes.listItem, classes.subListItem)}>
hotpink and bold
</div>
<div className={classes.subListItem}>no styles at all</div>