How to reference CSS Classes in a different class in Material UI - css

Question

I want to reference a CSS class in another CSS class present in the same makeStyles hook.
import React from 'react';
import { makeStyles, Typography, Grid } from '#material-ui/core';
const styles = makeStyles((theme) => ({
root: {},
textStyle: {
fontFamily: 'Brandon',
textTransform: 'uppercase',
cursor: 'pointer',
'&:hover': {
color: `${theme.palette.primary.contrastText} !important`,
$dropDown: {
// I want to apply this style to the dropDown class when I hover over the textStyle Class
opacity: 1,
},
},
},
dropDown: {
width: 'max-content',
position: 'absolute',
top: '80px',
backgroundColor: 'tomato',
pointerEvents: 'none',
opacity: 0, // manipulate this
},
dropDownList: {
padding: '30px 0px 50px',
minWidth: '200px',
position: 'relative',
width: 'auto',
},
text: {
// fontFamily: 'Brandon',
padding: '4px 0px',
},
dropDownItem: {
padding: '5px 0px',
},
}));
const Shop: React.FC = () => {
const classes = styles();
const trendingArr = [
'New Arrivals',
'Best Sellers',
'The Summer Edit',
'FRAME & Mejuri',
'New Arrivals',
'Best Sellers',
'The Summer Edit',
'FRAME & Mejuri',
];
return (
<>
<Typography variant='body1' className={classes.textStyle}>
Shop
</Typography>
<Grid container direction='row' className={classes.dropDown}>
<Grid
container
direction='column'
className={classes.dropDownList}
>
<Typography variant='body2' className={classes.text}>
<b>Trending</b>
</Typography>
{trendingArr.map((item, i) => (
<Typography
className={classes.dropDownItem}
variant='body2'
key={i}
>
{item}
</Typography>
))}
</Grid>
{/* another one */}
<Grid
container
direction='column'
className={classes.dropDownList}
>
<Typography variant='body2' className={classes.text}>
<b>Trending</b>
</Typography>
{trendingArr.map((item, i) => (
<Typography
className={classes.dropDownItem}
variant='body2'
key={i}
>
{item}
</Typography>
))}
</Grid>
</Grid>
</>
);
};
export default Shop;
I want to reference the dropDown class inside the hover selector of textStyle to change the opacity whenever I hover over the textStyle class. How can I achieve it ?