How can I select all the classNames that ends with a given word in MUI sx property?-CodePudding

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

}

CodePudding user response：

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"
    }
  }
};