CODEWITHSUNDEEP
reactjsmaterial-uioverridingaccordion
sixstring
sixstring

Reputation: 341

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>

Upvotes: 20

Views: 19818

Answers (3)

TestWell
TestWell

Reputation: 1069

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>

Upvotes: 41

Surya Kumar
Surya Kumar

Reputation: 1

If people are still struggling with it, write a div or Box and wrap it around each accordion. Example:

    
export const AccordionStyled = styled(Accordion)(
  sx({
    border: 'none',
    boxShadow: 'none',
  })
);

export const BoxStyled = styled(Box)(
  sx({
    '& AccordionStyled': {
      margin: '0px !important',
    },
  })
);

<BoxStyled>
 <AccordionStyled>
   [your code here]
 </AccordionStyled>
<BoxStyled>

This overrides margin and also helps control/remove any other styles applied by default. This also works for any MUI component that people find hard to remove or override.

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81370

You can do that by setting the Accordion margin to auto which should be the same as setting it to 0. Make sure the style is applied to every Accordions on the screen. See this example here.

The Accordion is being moved when expanding is just a side effect of positive margin plus the transition effect when expanded. Removing the margin will likely fix your issue.

import { withStyles } from "@material-ui/core/styles";
import MuiAccordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";

const Accordion = withStyles({
  root: {
    "&$expanded": {
      margin: "auto"
    }
  },
  expanded: {}
})(MuiAccordion);

Live Demo

Edit 66816785/how-to-make-accordion-expanded-state-steady

Upvotes: 4

Related Questions