如何修改Material UI中Popover的宽高？样式设置无效求助

我来帮你搞定这个问题！你遇到的问题主要有两个关键点：

• 你把样式对象直接传给了className属性，但className应该接收类名字符串，不是样式对象；
• Material UI的Popover本身只是一个定位容器，实际的内容区域是由它内部的Paper组件渲染的，所以直接给Popover设置宽高不会生效。

下面是几种可行的解决方案，你可以根据自己的项目情况选择：

方法1：通过PaperProps传递样式（推荐） #

这是最直接的方式，通过PaperProps把样式传递给Popover内部的Paper组件：

<Popover
  open={open}
  anchorEl={anchorEl}
  // 重点：用PaperProps给内部Paper设置样式
  PaperProps={{
    sx: {
      width: '250px',
      height: '300px',
      // 还可以添加其他样式，比如背景、圆角等
      borderRadius: 2,
      backgroundColor: '#fff'
    }
  }}
  anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
  transformOrigin={{ vertical: 'top', horizontal: 'right' }}
  disableRestoreFocus
>
  {/* 这里放你的Popover内容 */}
  <div>Popover内容示例</div>
</Popover>

方法2：使用sx的嵌套选择器 #

如果你想直接给Popover组件加样式，可以用sx的嵌套选择器选中内部的Paper：

<Popover
  open={open}
  anchorEl={anchorEl}
  sx={{
    '& .MuiPaper-root': {
      width: '250px',
      height: '300px'
    }
  }}
  anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
  transformOrigin={{ vertical: 'top', horizontal: 'right' }}
  disableRestoreFocus
>
  {/* Popover内容 */}
</Popover>

方法3：用styled组件定制（适合需要复用的场景） #

如果这个定制后的Popover需要在多个地方使用，可以用styled组件封装：

import { styled } from '@mui/material/styles';
import Popover from '@mui/material/Popover';

const StyledPopover = styled(Popover)`
  & .MuiPaper-root {
    width: 250px;
    height: 300px;
  }
`;

// 使用的时候
<StyledPopover
  open={open}
  anchorEl={anchorEl}
  anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
  transformOrigin={{ vertical: 'top', horizontal: 'right' }}
  disableRestoreFocus
>
  {/* Popover内容 */}
</StyledPopover>

补充说明 #

• 如果你用的是Material UI v4版本，需要用makeStyles代替sx：

  import { makeStyles } from '@mui/styles';
  
  const useStyles = makeStyles({
    popoverPaper: {
      width: '250px',
      height: '300px'
    }
  });
  
  // 组件内使用
  const classes = useStyles();
  
  <Popover
    open={open}
    anchorEl={anchorEl}
    PaperProps={{ className: classes.popoverPaper }}
    // 其他属性...
  >
    {/* 内容 */}
  </Popover>
  

内容的提问来源于stack exchange，提问作者jdetienne