Material UI Accordion第二个子元素Grid布局属性不生效问题求助

MUI 自带的 Accordion 组件默认会将 AccordionDetails 包裹在用于实现展开收起动画的 .MuiCollapse-root 容器中，你直接给 AccordionDetails 设置的 grid 列属性只会作用在 Collapse 容器内部，而 Collapse 本身作为 Accordion Grid 布局的直接子元素，没有指定列属性，所以你的配置不会生效。而 AccordionSummary 是 Grid 的直接子元素，所以属性可以正常生效。

这里提供两种可直接落地的方案，你可以根据需求选择：

• 方案1：给 Collapse 容器直接设置 grid 列属性
  直接在父元素 Accordion 的 sx 配置中指定 Collapse 容器的列规则，不需要修改原有子元素的配置，代码如下：

  return (
    <Accordion
      sx={{
        display: "grid",
        gridTemplateColumns: "1fr 2fr 1fr",
        // 新增：给内部的Collapse容器设置列占位规则
        "& .MuiCollapse-root": {
          gridColumnStart: "2",
          gridColumnEnd: "3"
        }
      }}
    >
      <AccordionSummary
        sx={{
          gridColumnStart: "2",
          gridColumnEnd: "4"
        }}
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <div>
          <Typography variant="h1" sx={{ fontSize: "40px" }}>
            {props.Title}
          </Typography>
          <Typography variant="subtitle1">{props.Description}</Typography>
          <Button
            size="small"
            variant="outlined"
            sx={{
              width: "140px",
              textAlign: "center",
              marginTop: "10px",
              color: "#2196F3",
              borderColor: "#2196F3"
            }}
          >
            More details
          </Button>
        </div>
      </AccordionSummary>
  
      <AccordionDetails>
        {props.children}
      </AccordionDetails>
    </Accordion>
  );
  

• 方案2：不修改外层Grid布局，直接给内容加居中样式
  如果你不需要严格依赖Grid的列分配，只需要内容居中展示，可以直接给AccordionDetails加水平居中的样式，代码如下：

  <AccordionDetails
    sx={{
      maxWidth: "600px", // 可根据你的设计要求调整最大宽度
      margin: "0 auto", // 水平居中
      textAlign: "center" // 如果需要文本本身也居中可以加这行
    }}
  >
    {props.children}
  </AccordionDetails>
  

两种方案都可以实现你要的内容居中效果，方案1完全复用你原本的Grid布局思路，方案2更简洁不需要调整外层配置。

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