在哪里可以找到 Material UI 中 Select 的所有 MenuProps 属性

Question

有了下一个 Material UI Select，我发现可以修改它的行为和外观。

import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

class SimpleSelect extends React.Component {
  state = {
    age: 10
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <Select
        value={this.state.age}
        onChange={this.handleChange}
        inputProps={{
          name: "age",
          id: "age-simple"
        }}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    );
  }
}

export default SimpleSelect;

这是上面加了MenuProps的，也是sandbox where I'm playing with it.

import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

class SimpleSelect extends React.Component {
  state = {
    age: 10
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <Select
        value={this.state.age}
        onChange={this.handleChange}
        inputProps={{
          name: "age",
          id: "age-simple"
        }}
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    );
  }
}

export default SimpleSelect;

我的问题是：在哪里可以找到所有可用的属性（如 anchorOrigin、transformOrigin 等）？

我想使下拉菜单更宽，并为每个下拉菜单项添加复选框，但我不知道要访问哪些 MenuProps 属性。

Answer 1

找到它的起点是 Select API 文档：https://material-ui.com/api/select/. Within the Props 部分你会找到 MenuProps:

MenuProps object Props applied to the Menu element.

在上面，单词 "Menu" 链接到 Menu API 文档。你可以看看那个然后说 "but where is anchorOrigin and transformOrigin?"

在 Menu Props API 文档的末尾，您会发现以下内容：

Any other props supplied will be provided to the root element (Popover).

在上面，单词 "Popover" 然后链接到 Popover API 文档（您可以在其中找到 anchorOrigin 和 transformOrigin）。

在 Popover Props API 文档的末尾，您会发现以下内容：

Any other props supplied will be provided to the root element (Modal).

同样，在上面，单词 "Modal" 链接到 Modal API 文档。因此 Menu 上可用的完整道具是 Menu、Popover 和 Modal 记录的所有道具的组合。目前正在进行一些改进文档的工作，以提供对所有适用道具的更直接访问：https://github.com/mui-org/material-ui/issues/18288.

在哪里可以找到 Material UI 中 Select 的所有 MenuProps 属性

Where can be found all MenuProps attributes of a Select in Material UI

javascript

css

drop-down-menu

reactjs

material-ui