I am trying to extract all the div's having some specific Mui classenames say access-MuiPickersCalendarHeader-switchHeader,access-MuiPickersDay-day etc. Here the actual class names are MuiPickersCalendarHeader-switchHeader,MuiPickersDay-day as per Material-ui. As I am seeding my components using StylesProvider it is adding access infront of the classes as prefix. Is there anyway that i can fetch all the div's whose class names includes "MuiPickersDay-day","MuiPickersCalendarHeader-switchHeader" and style them using makeStyles in material-ui?
For Example: Component 1 is having some elements with classnames : aboutpage-MuiPickersDay-day Component 2 is having some elements with classnames : homepage-MuiPickersDay-day
Create a makeStyles where i can style both of the component's elements whose classname includes 'MuiPickersDay-day'
I have tried using attribute selectors in makeStyles but i am not able to do that. It is not allowing me to use that approach For eample:
const useStyles = makeStyles((theme) => createStyles({
div[class^='MuiPickersDay-day]:{backgroundColor:'black'}
});
Solution Found:
In createStyles object do this:
const useStyles = makeStyles((theme) => createStyles({
'*':{
'& [class*="MuiPickersDay-day"]':{
backgroundColor:'black'
}
} });
In this way not only can you just target div rather you can apply styles for all the elements which consist of 'MuiPickersDay-day' class. if you want you can also give multiple class names like: [class*="MuiPaper-root"][class*="MuiPopover-paper"][class*="MuiPaper-rounded"]
Happy Coding!!