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

Question

我一直在尝试让 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"
  }
}));

标签： javascriptreactjsmaterial-ui

Answer 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>
    </>
  );
};