Grid properties on second child element of Accordion not working

user_6865638 0
Viewed 163

Here I have defined the parent element display:"Grid" and with my child element have defined the gridColumnStart as below. It's working fine with the first element but not with the second child element. Below have attached my code.

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

So here gridColumnStart and End working with AccordionSummary but not with AccordionDetails.

enter image description here

This is how it looks but I wanted the text to be in the middle. Not sure if the approach I'm heading towards is correct. Would appreciate if someone could help me.

material-ui typescript reactjs accordion grid
1 Answers

This is a simplified Accordion definition:

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

The reason your AccordionDetail styles doesn't work is because it's applied to the children of the grid item instead of the grid item itself. To fix it, you need to set the grid properties directly in the child of the grid container which is TransitionComponent, if you inspect the element you can see the class name of the DOM elelment is MuiCollapse-root:

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

Codesandbox Demo

user_94494260
Related