I want to override Accordion CSS using Mui styled utility but I am unable to get apply Accordion css onto it. There's an underlying class which I can't point to in my code. This is the mui class:

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1elwnq4-MuiPaper-root-MuiAccordion-root" style="user-select: auto;">

This is my code for Accordion

const CustomizedAccordion = styled(Accordion)<AccordionProps>(({ theme }) => ({
    root: {
        "& .MuiPaper-root": {
            color: 'darkslategray',
            backgroundColor: '#E4FAF4',
            borderRadius: '0.6rem',
            boxShadow: 'none'
        }
    
    },
    paddingBottom: '1.6rem',
    boxShadow: 'none',

}));

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

const CustomizedAccordion = styled(Accordion)(() => ({
  '& .MuiPaper-root': {
    color: 'darkslategray',
    backgroundColor: '#E4FAF4',
    borderRadius: '0.6rem',
    boxShadow: 'none'
  },
  paddingBottom: '1.6rem',
  boxShadow: 'none'
}));