将最大宽度和高度设置为 MUI Popper答案

【问题标题】：Set a max width and height to MUI Popper将最大宽度和高度设置为 MUI Popper
【发布时间】：2022-01-08 14:33:07
【问题描述】：

我一直在使用 MUI 的 popper API，并注意到它溢出了我的主 div。任何人都可以提出阻止这种情况的最佳方法吗？

我希望 popper 的高度更大。请看下面：

const DescriptionEditor = (props) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
    const [open, setOpen] = React.useState(false);
    const [placement, setPlacement] = React.useState();
  
    const handleClick = (newPlacement) => (event) => {
      setAnchorEl(event.currentTarget);
      setOpen((prev) => placement !== newPlacement || !prev);
      setPlacement(newPlacement);
    };

<Box sx={{ width: 200 }}>
                <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
                  {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={350}>
                      <Paper>
                        <Typography variant="subtitle3">WWF values diversity and is building a workforce that reflects the community we serve.</Typography>
                      </Paper>
                    </Fade>
                  )}
                </Popper>

                <Grid container justifyContent="center">
                    <Button onClick={handleClick('bottom')} variant="subtitle2" color="primary">Corporate Profile</Button>
                </Grid>
              </Box>


}

如果有人知道限制这一点的好方法，可能是通过 maxWidth 函数或 100% 属性在父 div 中，请告诉我！！

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

为了能够设置相对于主 div 的 popper 宽度，您必须使用“disablePortal”道具。它使 popper 位于父元素的 DOM 层次结构之下，否则 MUI 在 body 的第一级创建 popper。

您还必须将 position: 'relative' 添加到主 div 并将 popper 宽度设置为 '100%'。

    const [anchorEl, setAnchorEl] = React.useState(null);
    const [open, setOpen] = React.useState(false);
    const [placement, setPlacement] = React.useState();
  
    const handleClick = (newPlacement) => (event) => {
      setAnchorEl(event.currentTarget);
      setOpen((prev) => placement !== newPlacement || !prev);
      setPlacement(newPlacement);
    };

  return (
      <Box sx={{ width: 200, position: 'relative' }}>
        <Popper open={open} anchorEl={anchorEl} disablePortal placement={placement} transition>
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper sx={{ width:  '100%'}}>
                <Typography variant="subtitle3">WWF values diversity and is building a workforce that reflects the community we serve.</Typography>
              </Paper>
            </Fade>
          )}
        </Popper>
        <Grid container justifyContent="center">
            <Button onClick={handleClick('bottom')} variant="subtitle2" color="primary">Corporate Profile</Button>
        </Grid>
      </Box>
  );

【讨论】：