物料-UI&lt；选择&gt；组件下的&lt；MenuItems&gt；定位 [英] Positioning of <MenuItems> under the Material-ui <Select> component

问题描述

按照设计，单击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元素下对齐？

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

推荐答案

使用选择元素的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>

这篇关于物料-UI&lt；选择&gt；组件下的&lt；MenuItems&gt；定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！