I am using MUI and I need to change some properties that have classNames with these random IDs as prefixes. How can I select, for example, the first one like:
'& endsWith(MuiAccordionDetails-root)'
I want to do like this because these random IDs are changing constantly
const Styles = {
accordion:{
p:0,
'& .css-15v22id-MuiAccordionDetails-root':{
p:0,
},
'& .css-10gwilr-MuiButtonBase-root-MuiAccordionSummary-root':{
px: '10px',
},
'& .MuiCollapse-root':{
mx:'20px'
}
},
}
In Mui elements, classNames Are like this MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr
so there is always a separate class for each element, and class name by ids are changed in each render, and always separate from main class names like above,
so you can select your element by:
const Styles = {
accordion: {
p: 0,
"& .MuiAccordionDetails-root": {
p: 0
},
"& .MuiButtonBase-root- .MuiAccordionSummary-root": {
px: "10px"
},
"& .MuiCollapse-root": {
mx: "20px"
}
}
};