使用 Material UI 的按钮单击下拉菜单

【问题标题】：Dropdown on button click using Material UI使用 Material UI 的按钮单击下拉菜单
【发布时间】：2021-01-12 12:09:04
【问题描述】：

如何使用材质 ui 在按钮单击时显示下拉菜单？

目前，我可以这样做，但会填充额外的选择字段，这不是必需的。我不想用 css 隐藏选择字段。

另外，如何使用材质 ui 更改生成的弹出框的宽度、高度、位置和其他属性？ codesandbox 网址： https://codesandbox.io/s/du8mr

【问题讨论】：

【解决方案1】：

您可以使用Menu 组件代替Select 组件。

您可以使用接收所有 Popover 道具的MenuProps 更改Menu 道具。

来自Menu 文档：

提供的任何其他道具都将提供给根元素 (Popover)。

【讨论】：

如何使用材质ui更改生成的popover的宽度、高度、位置等属性？
请参阅此示例以获取 Popover。如果你不想要Select，你可以使用Menu，它在后台使用Popover 组件，你可以将所有道具传递给Menu。您可以使用CSS 设置Menu 组件的高度和宽度。
如何通过“菜单”传递“弹出框”道具？
您可以将所有Popover props 直接传递给Menu 组件。请参阅上面的报价单。意味着你可以做到<Menu anchorOrigin={{horizontal: 'center', vertical: 'vertical'}} />