Tengo un archivo de estilo js con un componente de notificación que tiene su propia clase. Contiene un div viewDot con su propia clase separada en el mismo archivo que está presente cuando aún no se ha hecho clic en la notificación. El div viewDot está dentro del div que tiene la clase estilo de notificación.

Quiero hacer que si paso el cursor sobre la notificación, el color del viewDot también cambie. Como se muestra a continuación, el color del viewDot solo cambia si paso el mouse directamente sobre el viewDot. Cualquier consejo sobre cómo lograr el comportamiento descrito es muy apreciado.

 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' } }, });

Los styles variables se importan desde este archivo ComponentStyles.js a un archivo Component.jsx para un Componente usando la ruta del archivo y los estilos se crean usando const useStyles = makeStyles(styles); antes del bloque de código del componente. En el bloque de código del componente, utilizo const classes = useStyles(); para usar algo como className={ classes.notificationStyle } para los elementos dentro del componente.