I have a js style file with a notification component that has its own class. It contains a viewDot div with its own separate class in the same file that is present when the notification hasn't been clicked on yet. The viewDot div is inside of the div that has the notificationStyle class.

I want to make it so that if I hover over the notification with a cursor, the color of the viewDot also changes. As it is below, the color of the viewDot only changes if I hover directly on the viewDot. Any tips on accomplishing the described behavior are greatly appreciated

const styles = theme => ({
    viewDot: {
        backgroundColor: '#00B8C4',
        '&:hover': {
            backgroundColor: '#F9D967',
        }
    },
    notificationStyle: {
        backgroundColor: '#FFFFFF',
        '&:hover': {
            backgroundColor: '#52B5C2',
        },
        // want to do something like this, but this is not correct as is
        '&:hover .viewDot': {
            backgroundColor: '#F9D967'
        }
    },
});

The variable styles is imported from this ComponentStyles.js file to a Component.jsx file for a Component using the file path and the styles are made using const useStyles = makeStyles(styles); before the code block for the component. In the code block for the component, I use const classes = useStyles(); in order to use something like className={ classes.notificationStyle } for the elements inside the component.