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

【问题标题】：Material-UI: Prevent Accordion summary vertical movementMaterial-UI：防止手风琴摘要垂直移动
【发布时间】：2022-02-26 15:39:26
【问题描述】：

创建了这个手风琴并将其用作菜单项。

但是，当我单击主标题时，手风琴摘要垂直向下移动。

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

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

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

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

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

panelSummary: {
  "&.Mui-expanded": {
    minHeight: 0
  },
  "& .MuiAccordionSummary-content.Mui-expanded": {
    margin: "auto"
  }
},

【讨论】：

谢谢，但在过渡期间仍有一些垂直变化。我错过了什么吗？尝试过的边距：“0”但同样如此。
@killjoy 对不起，我搞砸了。您还需要重置min-height 的&.Mui-expanded。请参阅我的更新答案。

【解决方案2】：

你可以在 mui 版本 5 中将 disableGutters 作为 true 传入

<Accordion disableGutters>
 // ....
</Accordion>

【讨论】：