remove MUI Accordion gap when expanded

Question

I'm trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to summary elements while it is in the expanded mode. I add this code to the summary element but that's not working. what do you offer me? it worth mentioning that it works on the first accordion but not the others!!!!!!!!!!

sx={{
   "&.Mui-expanded": {
   minHeight: 0,
   margin: '12px 0',
   },
   "& .MuiAccordionSummary-content.Mui-expanded": {
   margin: 0,
   }
}}

Answer 1

Are you setting this prop on Accordion or AccordionSummary ? I've tested your code on StackBlitz by setting it on Accordion element and it worked properly.

Answer 2

I used MUI customized accordion and I change its setting to it: I used my icon. it has a white background and no border and additional padding or margin:))))

export const Accordion = styled((props: AccordionProps) => (
    <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
    position: 'unset',
    border: 'none',
    boxShadow: 'none',
    maxWidth: 720,
    margin: '12 0',
    '&:before': {
        display: 'none',
        border: 'none'
    }
}));

export const AccordionSummary = styled((props: AccordionSummaryProps) => (
    <MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
))(({ theme }) => ({
    backgroundColor: 'white',
    padding: 0,
    flexDirection: 'row',
    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
        transform: 'rotate(180deg)'
    }
}));

export const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
    padding: 0,
    border: 'none'
}));

export const FAQText = styled(Typography)({
    maxWidth: 628
});