reactjs - 展开时如何消除 Accordion 间隙？

Question

我正在尝试使用 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>

Answer 1

您可以通过设置 Accordion 来做到这一点。 margin 到 auto这应该与将其设置为 0 相同.确保样式应用于每个 Accordion s 在屏幕上。看这个例子 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);

现场演示