在 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 的一个，也是我正在玩的一个沙箱。

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

查找此内容的起点是SelectAPI 文档： https: //material-ui.com/api/select/。在道具部分您会发现MenuProps：

MenuProps     object     应用于Menu元素的 Pros。

在上面，“菜单”一词链接到MenuAPI 文档。你可能会看着它并说“但是anchorOrigin和在哪里transformOrigin？”

在Menu Props API文档的末尾，您将找到以下内容：

提供的任何其他道具都将提供给根元素（Popover）。

在上面，单词“Popover”链接到PopoverAPI 文档（您可以在其中找到anchorOrigin和transformOrigin）。

在Popover Props API文档的末尾，您将找到以下内容：

提供的任何其他道具都将提供给根元素（Modal）。

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