如何在material-ui Nativeselect中设置下拉菜单的样式？

【问题标题】：How to to style dropdown menu in material-ui Nativeselect?如何在material-ui Nativeselect中设置下拉菜单的样式？
【发布时间】：2021-11-03 01:04:35
【问题描述】：

如何在 material-ui 选择组件中设置下拉菜单的样式，我希望能够更改该菜单的默认颜色，但使用 "&:not([multiple]) 选项": {background: "yellow"}不管用，并且还要向下推下拉菜单，因为它位于标签的顶部？

【问题讨论】：

它是浏览器原生的，你不能设置它的样式。我在 mac 上使用 chrome，下拉菜单是四舍五入的。使用普通的 Select 组件，您将能够更改样式。此外，该示例中的“radius”拼写错误。
@steve ，因此在这种情况下，本机意味着打开菜单的浏览器的本机，v4 中的选择问题出现在组件之上，在我的应用程序中对用户不利经验。
我相信是的。如果你只是添加一个基本的 HTML 选择组件并在不同的浏览器中尝试，你会发现它们都是不同的，因为它们使用了内置元素。我会尽快发布一个答案，应该对这个问题有所帮助。

标签： reactjs material-ui

【解决方案1】：

只是为了总结并提供来自 cmets 的问题的解决方案。

NativeSelect 使用浏览器的默认选择元素。例如，在不同的浏览器上查看how this looks。

解决方案是在 Material UI 中使用 Select 组件。

您提到的问题是菜单出现在组件的顶部，使其不太理想。要解决这个问题，您可以添加到 Select 组件的 MenuProps 属性中。

MenuProps={{
  anchorOrigin: {
    vertical: "bottom",
    horizontal: "left"
  },
  transformOrigin: {
    vertical: "top",
    horizontal: "left"
  },
  getContentAnchorEl: null
}}

这里我们说的是弹出菜单的左上角，应该锚定在选择组件的左下角。文档缺少此技巧...

Check it out here.

getContentAnchorEl: null 是必需的，虽然我不能告诉你太多。希望阅读本文的人可以告诉我们。

【讨论】：