Unable to override Mui Accordion using Styled Utility

Question

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

Answer 1

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

Answer 2

I want to modify expanded style from its style which has code as .css-kj1tus-MuiPaper-root-MuiAccordion-root.Mui-expanded { margin: 16px 0; }.css-kj1tus-MuiPaper-root-MuiAccordion-root.Mui-expanded { margin: 16px 0; } to margin:0px 0px 0px 4px ;

But, unable to make it working.

Answer 3

I had the same problem and the solution is in the props

<Accordion disableGutters />

If you set it to true, the margin disappears. Link to Accordion API