如何消除MUI Accordion展开状态下的间距及summary元素移位问题

问题原因 #

你当前的样式仅作用于<AccordionSummary>组件，而MUI的<Accordion>父组件本身在展开状态下自带默认上下边距，多个Accordion并列时，MUI默认的相邻组件边距合并规则会覆盖你写在Summary上的低优先级样式，这就是样式仅对第一个Accordion生效、展开移位的核心原因。另外你原有样式中给展开态Summary设置了margin: '12px 0'，也不符合你要去掉上下外边距的需求。

具体修改步骤 #

• 第一步：给每一个<Accordion>父组件添加如下sx样式，覆盖父级展开态的默认边距，避免整体移位：

sx={{
  "&.Mui-expanded": {
    margin: 0, // 移除Accordion展开时自带的上下外边距
  }
}}

如果你是把Accordion嵌套在<AccordionGroup>组件中，还要给AccordionGroup添加样式覆盖默认间距规则：

sx={{
  "& .MuiAccordion-root": {
    "&:before": {
      display: "none" // 可选：移除Accordion之间的默认分隔线
    }
  }
}}

• 第二步：修改你原有写在<AccordionSummary>上的sx样式，用&&提高样式优先级，同时修正边距配置：

sx={{
  "&&.Mui-expanded": {
    minHeight: 0,
    margin: 0, // 移除summary展开态的上下外边距
  },
  "&& .MuiAccordionSummary-content.Mui-expanded": {
    margin: 0,
  }
}}

修改后所有Accordion的展开样式都会生效，不会出现移位、多余边距的问题。

内容的提问来源于stack exchange，提问作者PariParia