Material-UI：防止手风琴摘要垂直移动

Question

创建此手风琴并将其用作菜单项。

然而，当我点击主标题时，手风琴摘要垂直向下移动。

如何在打开时保持主图块固定？

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

展开时，摘要内容边距垂直设置为20px，如果您不想在展开过程中看到摘要大小变化，则需要重新设置：

panelSummary: {
  flexDirection: "row-reverse",
  paddingLeft: "0px",
  "&.Mui-expanded": {
    minHeight: 0
  },
  "& .MuiAccordionSummary-content.Mui-expanded": {
    margin: "auto"
  }
},

现场演示