手风琴的第二个子元素的网格属性不起作用

Question

这里我定义了父元素 display:"Grid" 并且我的子元素定义了 gridColumnStart 如下。它适用于第一个元素但不适用于第二个子元素。下面附上了我的代码。

return (
  <Accordion
    sx={{
      display: "grid",
      gridTemplateColumns: "1fr 2fr 1fr"
    }}
  >
    <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
      sx={{
        gridColumnStart: "2",
        gridColumnEnd: "3"
      }}
    >
      {props.children}
    </AccordionDetails>
  </Accordion>
);

所以这里 gridColumnStart 和 End 使用 AccordionSummary 但不使用 AccordionDetails。

这是它的外观，但我希望文本位于中间。不确定我要采用的方法是否正确。如果有人能帮助我，我将不胜感激。

Answer 1

这是一个简化的 Accordion definition:

<AccordionRoot>
  <AccordionSummary />
  <TransitionComponent>
    <div>
      <AccordionDetail />
    </div>
  </TransitionComponent>
</AccordionRoot>

您的 AccordionDetail 样式不起作用的原因是它应用于网格项的子项而不是网格项本身。要修复它，您需要直接在 TransitionComponent 网格容器的子项中设置网格属性，如果您检查该元素，您可以看到 DOM 元素的 class 名称是 MuiCollapse-root:

<Accordion
  sx={{
    display: "grid",
    gridTemplateColumns: "1fr 2fr 1fr",
    "& .MuiCollapse-root": {
      gridColumnStart: "2",
      gridColumnEnd: "3"
    }
  }}
>

手风琴的第二个子元素的网格属性不起作用

Grid properties on second child element of Accordion not working

grid

accordion

typescript

reactjs

material-ui