reactjsmaterial-uioverridingaccordion

How to remove Accordion gap when expanded?

I'm trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to some elements while it is in the expanded mode.

Example follows like this, but it's not working, my component is still too "jumpy" (when expanded it increases in width and like some invisible margins are being added)

...
expanded: {
  margin: '0px',
},
test: {
  '&$expanded': {
    margin: '0px',
  },
},
...
<Accordion
  classes={{
    root: classes.test,
    expanded: classes.expanded,
  }}
  expanded={expanded}
>
  <AccordionSummary
    onClick={() => setExpanded(!expanded)}
    classes={{
      expanded: classes.expanded,
    }}
  >
    The Summary
  </AccordionSummary>
  <AccordionDetails>
    <p>the details</p>
  </AccordionDetails>
</Accordion>
Solution

  • In MUI v5 & v6, it's as easy as setting disableGutters to true. This prevents all up/down repositioning when expanding the Accordion. More info here: https://mui.com/material-ui/api/accordion/#props.

    Like this:

    <Accordion disableGutters>
  {/* ... */}
</Accordion>