CODEWITHSUNDEEP
javascriptmaterial-ui
PariParia
PariParia

Reputation: 47

remove MUI Accordion gap when expanded

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

Upvotes: 1

Views: 3069

Answers (3)

Fran Hughes
Fran Hughes

Reputation: 1

Answer is in the docs https://mui.com/material-ui/api/accordion/

If you want to stop the gap between accordions when expanded type add "disableGutters" within in the <Accordion tag, e.g.

<Accordion
 disableGutters
 key={listId}
 defaultExpanded
 sx={{ backgroundColor: "#c12", color: "white" }}
>

that removes the default gutter gaps between accordions

Upvotes: 0

PariParia
PariParia

Reputation: 47

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

Upvotes: 2

timewastingprofessional
timewastingprofessional

Reputation: 806

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.

Upvotes: -1

Related Questions