展开时如何消除手风琴间隙？

Question

我试图让AccordionMUI 组件在处于展开模式时不移动，也不将顶部和底部边距应用于某些元素。

示例如下，但它不起作用，我的组件仍然太“跳跃”（展开时它的宽度会增加，并且会添加一些不可见的边距）

...
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>

Answer 1

在 MUI v5 中，只需设置disableGutters为true. 这可以防止展开手风琴时所有向上/向下重新定位。更多信息请参见： https: //mui.com/material-ui/api/accordion/#props。

像这样：

<Accordion disableGutters>
  {/* ... */}
</Accordion>

Answer 2

您可以通过将Accordion边距设置为与auto将其设置为相同的方式来做到这一点0。确保该样式应用于Accordion屏幕上的每个 s。请参阅此处的示例。

扩展时移动Accordion只是正边距加上扩展时的过渡效果的副作用。删除边距可能会解决您的问题。

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

现场演示