Estoy tratando de extraer todos los div que tienen algunos nombres de clase Mui específicos, digamos access-MuiPickersCalendarHeader-switchHeader, access-MuiPickersDay-day, etc. Aquí los nombres de clase reales son MuiPickersCalendarHeader-switchHeader, MuiPickersDay-day según Material-ui. Como estoy sembrando mis componentes usando StylesProvider, está agregando acceso al frente de las clases como prefijo. ¿Hay alguna forma de que pueda obtener todos los div cuyos nombres de clase incluyen "MuiPickersDay-day","MuiPickersCalendarHeader-switchHeader" y diseñarlos usando makeStyles en material-ui?
Por ejemplo: el componente 1 tiene algunos elementos con nombres de clase: aboutpage-MuiPickersDay-day El componente 2 tiene algunos elementos con nombres de clase: homepage-MuiPickersDay-day
Cree un makeStyles donde pueda diseñar ambos elementos del componente cuyo nombre de clase incluya 'MuiPickersDay-day'
He intentado usar selectores de atributos en makeStyles pero no puedo hacerlo. No me permite usar ese enfoque. Por ejemplo:
const useStyles = makeStyles((theme) => createStyles({ div[class^='MuiPickersDay-day]:{backgroundColor:'black'} });Solución encontrada :
En el objeto createStyles haz esto:
const useStyles = makeStyles((theme) => createStyles({ '*':{ '& [class*="MuiPickersDay-day"]':{ backgroundColor:'black' } } });De esta manera, no solo puede apuntar a div, sino que también puede aplicar estilos para todos los elementos que consisten en la clase 'MuiPickersDay-day'. si lo desea, también puede dar varios nombres de clase como: [class*="MuiPaper-root"][class*="MuiPopover-paper"][class*="MuiPaper-rounded"]
¡Feliz codificación!