Question

有没有人知道如何控制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={{anchorOrigin:{vertical:"center",horizontal:"left"}}}>
    <MenuItem value={1} primaryText="one" />
    <MenuItem value={2} primaryText="two" />
    <MenuItem value={3} primaryText="three" />
</SelectField>

如果您需要准确设置＆＃34; popover＆＃34;的定位？（这实际上是一个＆＃34;下拉菜单＆＃34;），我想你可以尝试覆盖该菜单的不同（样式？）道具之一：http://www.material-ui.com/#/components/dropdown-menu（＆＃34;属性＆＃34;部分）

另一种方法是使用popover而不是......

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

Answer 3

以下是在 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 组件上并且不会偏离。

Answer 4

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

控制SelectField的弹出位置锚点

4 个答案: