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

【问题标题】：How to remove Accordion gap when expanded?展开时如何消除手风琴间隙？
【发布时间】：2021-03-26 12:16:36
【问题描述】：

我试图让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>

【问题讨论】：

标签： reactjs material-ui overriding accordion

【解决方案1】：

您可以通过将Accordion 边距设置为auto 来做到这一点，这应该与将其设置为0 相同。确保样式应用于屏幕上的每个Accordions。请参阅此示例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);

现场演示

【讨论】：