<MenuItems>在Material-ui <Select>组件下的位置

Question

根据设计，单击材质用户界面<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元素下对齐？

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

Answer 1

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

Answer 2

虽然我可能会迟到，但是我知道如何解决这两个问题。

1. 使用<Select>并设置正数项：

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

1. 使用<TextField select>并设置正数项：

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

适合您的代码示例：

希望能帮助您！

Answer 3

是的，有可能。 Select在幕后使用Popover，您将不得不覆盖MuiPopover-paper的顶部和左侧值。
Material-ui并没有提供一种干净的方法，因为它们将顶部和左侧作为内联样式注入。
为此，首先创建MuiTheme并覆盖MuiPopover-paper：

import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiPopover: {
      paper: {
        top: '43px !important', //you might need other values for your select.
        left: '7px !important'
      }
    }
  }
});

之后，只需用ThemeProvider包装组件（或整个应用程序，如果您希望此样式成为应用程序中的默认Material-ui样式）：

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

您可以在auth methods

上参考有效的示例