Is there a way that we can use attribute selectors in Material-UI using makeStyles?

user_10271100 0
Viewed 252

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'}
});
material-ui reactjs css javascript
1 Answers

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!!

user_102711000
Related