如何让 Material UI 过渡组件完全填充其父组件？答案

【问题标题】：How would you get a Material UI transition component to completely fill its parent component?如何让 Material UI 过渡组件完全填充其父组件？
【发布时间】：2021-02-09 23:05:57
【问题描述】：

我一直在尝试让 Material UI 过渡组件完全填充其父组件。通过将其宽度和高度设置为 100% 并将其在 Y 轴上转换为正确的像素数，我取得了部分成功。然而，在打开、关闭和重新打开过渡后，它不再采用填充整个父 div 的原始形状，如下所示：

以下是该组件的代码。有谁知道如何解决这个问题？

  const Item = (props) => {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);

  const handleClick = () => {
    expanded ? setExpanded(false) : setExpanded(true)
  }

  return (
    <>
      <Box className={classes.item} onClick={handleClick}>
        <ChatIcon className={classes.itemIcon}/>
        <Typography className={classes.itemTitle}>{props.title}</Typography>
        <Grow in={expanded} style={{backgroundColor: "blue", width: "100%", height: "100%", position: "relative", transform: `translateY(${-141}px)`}}>
          <Box>
            <Typography className={classes.itemBodyText}>{props.body}</Typography>
          </Box>
        </Grow>
      </Box>
    </>
  );
};

现有的 CSS：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  textBox: {
    width: "100%",
    textAlign: "center",
    backgroundColor: `${theme.palette.secondary.main} !important`,
    padding: 10
  },
  bodyText: {
      color: `${theme.palette.white} !important`,
      maxWidth: 1000,
      margin: "0 auto",
      paddingBottom: 40,
      fontSize: 16,
      paddingLeft: 20,
      paddingRight: 20
  },
  item: {
    width: 350,
    height: 300,
    backgroundColor: "red"
  },
  heading: {
    paddingTop: 40,
    paddingBottom: 20,
    fontSize: 50,
    lineHeight: 1.7
  },
  itemIcon: {
    width: 75,
    height: 75,
    margin: 20
  },
  carousel: {
    backgroundColor: "blue"
  }
}));

【问题讨论】：

能否也包括你已有的css。
@Hypothesis 抱歉，现在添加！

标签： javascript reactjs material-ui

【解决方案1】：

更新：我很愚蠢并且想太多了。就像不使用 transform 并使用此处显示的 top 和 left 属性一样简单：

const Item = (props) => {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);

  const handleClick = () => {
    expanded ? setExpanded(false) : setExpanded(true)
  }

  return (
    <>
      <Box className={classes.item} onClick={handleClick}>
        <ChatIcon className={classes.itemIcon}/>
        <Typography className={classes.itemTitle}>{props.title}</Typography>
        <Grow in={expanded} style={{backgroundColor: "blue", width: "100%", height: "100%", position: "relative", transform: `translateY(${-141}px)`}}>
          <Box>
            <Typography className={classes.itemBodyText}>{props.body}</Typography>
          </Box>
        </Grow>
      </Box>
    </>
  );
};

【讨论】：