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

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>

标签： reactjsmaterial-uioverridingaccordion

Answer 1

您可以通过将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);

现场演示