你如何改变材料中弹出的宽度和高度？

Question

我试图修改弹出材料ui的宽度和高度，但什么都没有？请帮助谢谢

                                      open={open}
                                      anchorEl={anchorEl}
                                      className={{
                                            height: '300px',
                                            width: '250px'
                                      }}
                                      anchorOrigin={{
                                        vertical: 'top',
                                        horizontal:'left',
                                      }}
                                      transformOrigin={{
                                        vertical: 'top',
                                        horizontal: 'right',
                                      }}
                                      disableRestoreFocus
                                    >

Answer 1

使用Popover的PaperProps属性：

False
True

Answer 2

在你的代码中你有className等于css，这是行不通的。您可以将className更改为样式，它应该可以工作，或者您必须添加一个const变量并将其挂钩到withStyle HOC。然后将高度和宽度添加到该const，然后将您在其中创建的类调用到className。

所有这些示例都在material-ui网站上。 https://material-ui-next.com/getting-started/faq/我发现非常有帮助。

Answer 3

尝试在您的css文件.MuiPaper-elevation8上更改此类名称的样式，如下所示：

.MuiPaper-elevation8{
width: 300px;
height: 150px;
}

Answer 4

最简单的方法是在Popover内部拉伸内容，因为它的宽度是自动计算的。

<Popover>
  <div 
    style={{ 
      width: '300px', 
      height: '200px'
    }}
  >
    Some inside content
  </div>
</Popover>

这会将Popover自身拉伸到所需的大小。