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

问题描述

我试图让 Accordion MUI 组件在展开模式下不移动，也不对某些元素应用顶部和底部边距。

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

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

解决方法

您可以通过将 Accordion 边距设置为 auto 来实现，这应该与将其设置为 0 相同。确保该样式应用于屏幕上的每个 Accordion。请参阅此示例 here。

扩展时移动 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);

现场演示