SelectField 的控制弹出窗口位置锚点

Question

有谁知道如何控制SelectField的popover的位置吗？

我知道 selectfield 中有一个下拉菜单并且不包含弹出窗口，但我认为也许可以通过某种方式控制它。

Answer 1

我实际上遇到了同样的问题。

我认为这不可能，至少它不是可配置属性的一部分。我查看了 SelectField 源代码，显然，即使 SelectField 在下面使用 DropDownMenu，并且 DropDown 在下面使用 PopOver，但是 anchorOrigin 的配置是硬编码。

https://github.com/callemall/material-ui/blob/master/src/DropDownMenu/DropDownMenu.js#L9

const anchorOrigin = {
  vertical: 'top',
  horizontal: 'left',
};

Answer 2

您可以使用 SelectField 组件中的道具 dropDownMenuProps 覆盖下拉菜单道具。

Answer 3

确实有可能：

<SelectField dropDownMenuProps={{anchorOrigin:{vertical:"center",horizontal:"left"}}}>
    <MenuItem value={1} primaryText="one" />
    <MenuItem value={2} primaryText="two" />
    <MenuItem value={3} primaryText="three" />
</SelectField>

如果您需要准确设置 "popover"（实际上是 "dropdown menu"）的定位，我认为您可以尝试覆盖其中一个不同的（样式？）道具该菜单：http://www.material-ui.com/#/components/dropdown-menu（"Properties" 部分）

另一种方法是使用弹出窗口...

此外，新的 v1.0 测试版刚刚发布了 select 组件；它可能会给你更好的控制： https://material-ui-1dab0.firebaseapp.com/demos/selects/

Answer 4

以下是 material-ui v4.11.3（2021 年初）的实现方式：

<Select
  value={10}
  MenuProps={{
    anchorOrigin: {
      vertical: "top",
      horizontal: "left",
    },
    transformOrigin: {
      vertical: "bottom",
      horizontal: "left",
    },
    getContentAnchorEl: null,
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

getContentAnchorEl: null 道具基本上定位渲染的 Popover 使其粘附在 Select 组件上并且不会偏离。

SelectField 的控制弹出窗口位置锚点

Control popover location anchor for SelectField

material-ui