Material-UI: Prevent Accordion summary vertical movement - css

Question

Created this accordion and will use it as a menu item.
However, when I click Main title, accordion summary moves vertically downward.
How can I keep Main tile fixed while opening?
sandbox
import React from "react";
import {
Typography,
Grid,
Accordion,
AccordionSummary,
AccordionDetails,
ListItem
} from "#material-ui/core";
import { createStyles, makeStyles, Theme } from "#material-ui/core/styles";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
panelSummary: {
flexDirection: "row-reverse",
paddingLeft: "0px"
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
},
innerMenuItem: {
paddingLeft: "32px"
},
expanded: {
padding: "0px"
}
})
);
export default function App() {
const classes = useStyles();
return (
<Accordion>
<AccordionSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>Main title</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid container direction="column">
<ListItem className={classes.innerMenuItem} button key={1}>
<Typography className={classes.heading}>Sub Item 1</Typography>
</ListItem>
<ListItem
className={classes.innerMenuItem}
button
key={2}>
<Typography className={classes.heading}>Sub Item 2</Typography>
</ListItem>
</Grid>
</AccordionDetails>
</Accordion>
);
}

Answer 1

You can just pass in disableGutters as true in version 5 of mui
<Accordion disableGutters>
// ....
</Accordion>

Answer 2

When expanded, the summary's vertical margin is set to some value, you need to reset it if you don't want to see the summary size changes during the expansion:
V5
<AccordionSummary
sx={{
"&.Mui-expanded": {
minHeight: 0
},
"& .MuiAccordionSummary-content.Mui-expanded": {
// margin from https://github.com/mui-org/material-ui/blob/cc0e2ab63e8be9ec4d51a49bfde17ef28fc77b9c/packages/mui-material/src/AccordionSummary/AccordionSummary.js#L64-L64
margin: "12px 0"
}
}}
>
V4
panelSummary: {
"&.Mui-expanded": {
minHeight: 0
},
"& .MuiAccordionSummary-content.Mui-expanded": {
margin: "auto"
}
},