你如何改变材料中popover的宽度和高度？答案

【问题标题】：how do you change the width and heigth for popover in material ?你如何改变材料中popover的宽度和高度？
【发布时间】：2018-04-23 15:45:09
【问题描述】：

我正在尝试修改弹出框材质 ui 的宽度和高度，但什么也没做？请帮忙谢谢

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

【问题讨论】：

FAQ on how to question on stackoverflow

标签： material-ui popover

【解决方案1】：

使用 Popover 的 PaperProps 属性：

      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        value={value}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        PaperProps={{
          style: { width: '100%' },
        }}

【讨论】：

【解决方案2】：

最简单的方法是拉伸弹出框内的内容，因为它的宽度是自动计算的。

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

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

【讨论】：

【解决方案3】：

在您的代码中，您的 className 等于 css，这将不起作用。您可以将 className 更改为 style，它应该可以工作，或者您将不得不添加一个 const 变量并将其挂钩到 withStyle HOC。然后将高度和宽度添加到该常量，然后将您在其中创建的类调用到类名。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：