如何解决Material UI Accordion不同设备下边距间距不一致的问题

问题描述 #

使用Material UI Accordion组件开发筛选菜单，筛选项边距设置、运行代码完全一致，但不同尺寸设备上显示效果存在差异，调整屏幕尺寸时间距不一致的情况也会同步变化。

相关代码 #

FilterAccordion.tsx 代码 #

<Box className={classes.accordionRoot}>
  <Accordion style={{ boxShadow: "none" }} defaultExpanded={true}>
    <AccordionSummary
      expandIcon={<ExpandMore style={{ fill: "#d3d3d3" }} />}>
      <div className={classes.verticalrootcontainer}>
        <Icon
          onClick={(e) => e.stopPropagation()}
          style={{
            fill: "#d3d3d3",
            width: "2rem",
            marginRight: "1rem",
            transform: "scale(3)",
            zIndex: -1,
          }}
        />
        <Typography
          variant="body1"
          className={`titleAquire ${classes.title}`}>
          {title}
        </Typography>
      </div>
    </AccordionSummary>
    <AccordionDetails>
      <div className={classes.listRoot}>
        {Object.keys(groupByPacks).map((item, index) => {
          let checked = isChecked(item);
          return (
            <div
              key={index}
              className={`${classes.list} ${checked ? classes.selected : ""}`}
              onClick={() => handleOnCheck(item)}>
              <Typography variant="body1" className={classes.item}>
                {item}
              </Typography>
              <Typography variant="body1" className={classes.item}>
                {groupByFilteredPacks[item] ? groupByFilteredPacks[item]?.length : 0}
              </Typography>
            </div>
          );
        })}
      </div>
    </AccordionDetails>
  </Accordion>
</Box>

样式代码 #

accordionRoot: {
  "& .MuiAccordion-root": {
    background: "transparent",
  },
  "& .MuiAccordionDetails-root": {
    padding: "0px",
  },
  "& .MuiAccordionSummary-root": {
    padding: "0px",
    marginBottom: "-1rem",
  },
  "& .MuiCollapse-entered": {
    marginTop: "1rem",
  },
},
title: {
  fontSize: "18px",
  color: theme.on.dark,
},
verticalrootcontainer: {
  display: "flex",
  alignItems: "center",
},
list: {
  display: "flex",
  width: "100%",
  alignItems: "center",
  justifyContent: "space-between",
  marginTop: "0.2rem",
  padding: "0.2rem 0.5rem",
  cursor: "pointer",
  "&:first-child": {
    marginTop: 0,
  },
},
item: {
  textTransform: "uppercase",
  color: theme.on.dark,
  opacity: "30%",
},
selected: {
  background: theme.on.dark,
  "& p": {
    color: theme.darkMode.light,
    opacity: "100%",
  },
},
listRoot: {
  width: "100%",
},

修复方法 #

该问题是负margin与正margin叠加产生的外边距折叠行为在不同渲染引擎下表现不一致导致，同时rem单位受根字体大小动态调整影响时会放大间距差异，按以下步骤修改即可：

• 移除不稳定的负margin配置，删除accordionRoot下MuiAccordionSummary-root的marginBottom: "-1rem"属性
• 移除冗余的Collapse边距配置，删除accordionRoot下"& .MuiCollapse-entered": { marginTop: "1rem" }属性，改为直接给MuiAccordionDetails-root设置padding: "1rem 0 0 0"控制头部和列表的间距，避免外边距折叠
• 替换列表的上边距为下边距，删除list样式中marginTop: "0.2rem"和&:first-child的特殊配置，改为marginBottom: "0.2rem"，同时给listRoot加marginBottom: "-0.2rem"抵消最后一个列表项的多余下边距
• 可选：如果需要跨设备间距完全一致，可将rem单位替换为px单位，或固定根节点font-size不受系统字体大小调整影响

修改后的参考样式：

accordionRoot: {
  "& .MuiAccordion-root": {
    background: "transparent",
  },
  "& .MuiAccordionDetails-root": {
    padding: "1rem 0 0 0",
  },
  "& .MuiAccordionSummary-root": {
    padding: "0px",
  },
},
list: {
  display: "flex",
  width: "100%",
  alignItems: "center",
  justifyContent: "space-between",
  marginBottom: "0.2rem",
  padding: "0.2rem 0.5rem",
  cursor: "pointer",
},
listRoot: {
  width: "100%",
  marginBottom: "-0.2rem",
},

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