如何在 MUI 5 中更改作为 Select 组件一部分的 Popover 组件的位置？

Question

我使用一个

Select

组件（假设这个）。默认情况下，

Popover

组件出现在选择字段的正下方，但我想将其放置在右侧。我将在下面描述我尝试实现此行为的方法以及每次失败的原因。请记住，我是 MUI 的新手。

更改位置的最正确方法是设置
```
anchorOrigin
```
和
```
transformOrigin
```
道具，但仅当您可以访问这些道具时才有效。
```
Select
```
组件自行创建
```
Popover
```
（或者更准确地说是
```
Menu
```
内的
```
Select
```
组件），并且不提供用于传播 props 的 API。
```
Menu
```
组件有一个
```
PopoverClasses
```
属性，它将
```
classes
```
传播到
```
Popover
```
，所以我想通过使用 JS 计算的值覆盖
```
left
```
和
```
top
```
样式来更改位置。但无论我多么努力地试图弄清楚它是如何工作的，我都做不到。我找到的每份指南都使用
```
makeStyles
```
中的
```
"@mui/styles"
```
或
```
createUseStyles
```
中的
```
"react-jss"
```
，自 MUI v5 以来已弃用。 MUI v5 中
```
classes
```
属性是否已完全弃用？
将
```
"& .MuiPopover-root"
```
等样式添加到
```
Select
```
或
```
Menu
```
也不起作用，因为
```
Popover
```
在 DOM 顶部附近创建以用作模式对话框，而不是
```
Select 的子级
```
.
尽管
```
Menu
```
不会直接将 props 传播到
```
Popover
```
，但它会将 props 传播到
```
MenuList
```
，它是
```
Popover
```
的子级。使用
```
MenuListProps: {ref=myRef}
```
我可以通过
```
Popover
```
访问
```
myRef.current.parentElement
```
的 DOM 元素。但这还不够，因为我没有好的事件来覆盖值。
```
Popover
```
是在
```
onOpen
```
的
```
Select
```
事件触发后不久创建的，因此在事件期间，值
```
myRef.current
```
是未定义的，并且在
```
setTimeout()
```
之后为时已晚 - 明显是
```
Popover 
```
跳跃。

这么简单的动作太难了。我错过了一些明显的事情吗？

Answer 1

使用

Select

组件，您可以通过

Popover

属性传播其

MenuProps

属性。

它之所以有效，是因为

Menu

实际上将 props 传播到

Popover

并且可以接受其所有属性，如 docs

中所述

示例：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  MenuProps={{
    anchorReference: "anchorPosition",
    anchorPosition: { top: 0, left: 475 }
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

如何在 MUI 5 中更改作为 Select 组件一部分的 Popover 组件的位置？

问题描述投票：0回答：1

1个回答

最新问题

如何在 MUI 5 中更改作为 Select 组件一部分的 Popover 组件的位置？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1