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

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

在 MUI v5 和 v6 中，只需将

disableGutters

设置为

true

即可。这可以防止展开手风琴时所有向上/向下重新定位。更多信息在这里：https://mui.com/material-ui/api/accordion/#props.

像这样：

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

Answer 2

您可以通过将

Accordion

边距设置为

auto

来实现此目的，这应该与将其设置为

0

相同。确保该样式应用于屏幕上的每个

Accordion

。请参阅此示例此处。

扩展时

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

现场演示

Answer 3

如果人们仍然在努力解决这个问题，请编写一个 div 或 Box 并将其包裹在每个手风琴周围。 示例：

    
export const AccordionStyled = styled(Accordion)(
  sx({
    border: 'none',
    boxShadow: 'none',
  })
);

export const BoxStyled = styled(Box)(
  sx({
    '& AccordionStyled': {
      margin: '0px !important',
    },
  })
);

<BoxStyled>
 <AccordionStyled>
   [your code here]
 </AccordionStyled>
<BoxStyled>

这会覆盖边距，还有助于控制/删除默认应用的任何其他样式。这也适用于人们发现难以删除或覆盖的任何 MUI 组件。