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

Question

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

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

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

沙盒

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

标签： cssreactjsmaterial-ui

Answer 1

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

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