Material-ui <Select>组件下<MenuItems>的定位答案

【问题标题】：Positioning of <MenuItems> under the Material-ui <Select> componentMaterial-ui <Select>组件下<MenuItems>的定位
【发布时间】：2020-01-08 23:05:07
【问题描述】：

根据设计，单击 material-ui <Select> 组件（或 <TextField select> 组件）会导致菜单项出现在覆盖原始 Select/TextField 元素的位置。

<Select ...>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

是否可以覆盖此定位（无论是使用 JSS 还是使用新组合），以便菜单项直接在原始 Select/TextField 元素下方对齐？

任何指导将不胜感激。谢谢。

【问题讨论】：

这能回答你的问题吗？ Material UI Select override Position in theme

标签： material-ui

【解决方案1】：

使用 Select 元素的 MenuProps 属性

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

【讨论】：

非常感谢！我一直在寻找这个！
如果您的菜单太高，您可能还需要使用 MenuProps.PaperProps.style.maxHeight 来查看这些更改是否生效。

【解决方案2】：

Mui v5 的更新答案即将到来。

Mui v5：

<MenuItems>的位置在Mui v5的Material-ui下默认<Select>。

如果想改变位置，代码示例：

Mui v4：

使用<Select> 并设置菜单项位置：

        <Select
          ...
          MenuProps={{
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "left"
            },
            getContentAnchorEl: null
          }}
        >

使用<TextField select> 并设置菜单项位置：

      <TextField
        ...
        select={true}
        SelectProps={{
          MenuProps: {
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "left"
            },
            getContentAnchorEl: null
          }
        }}
      >

代码示例：

希望能帮到你！

【讨论】：

完美的例子。这些文档有时很难找到这类东西，很高兴我能够更快地用谷歌搜索它。谢谢。
在 MUI 5 中，如果选择列表太长而无法容纳，菜单会重新定位在选择输入上，就像在 MUI 4 中一样。有没有办法为选择列表设置锚元素，例如下拉菜单，以便长时间选择将保持锚定到选择输入？
我刚刚发现我需要设置MenuProps.PaperProps.style.maxHeight，如上所述。如果 maxHeight 可以容纳在选择输入下方的可用空间中，则列表将锚定在左下方。如果 maxHeight 不适合，列表将被移动以适合。

【解决方案3】：

像这样使用 variant="standard" 和 Select 和 MenuItem：确保从 @mui/material 导入 Select。

  import FormControl from '@mui/material/FormControl';
    import Select from '@mui/material/Select';
    import InputLabel from '@mui/material/InputLabel';


    <FormControl variant="standard"  required className={classes.formControl}>
                        <InputLabel htmlFor="demo-simple-select-standard-label">vesselType</InputLabel>
    
                        <Select
                            defaultValue={formik.values?.vesselType}
                            value={formik.values?.vesselType}
                            // id="grouped-native-select"
                            name="vesselType"
                            onChange={formik.handleChange}
    
                            disabled={!formik.values.imoNo || !imo}
                            className="w-100"
                            labelId="demo-simple-select-standard-label"
                            id="demo-simple-select-standard"
                        >
                            <MenuItem  aria-label="None" value=""/>
                            {vesselType.map((option, i) => <MenuItem key={i}
                                                                
   value={option.value}>{option.name}</MenuItem>)}
                        </Select>
                    </FormControl>

【讨论】：