javascript - 在哪里可以找到 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/ . Props内您将找到 MenuProps 部分:

MenuProps     object     Props applied to the Menu element.

在上面，单词“Menu”链接到 Menu API 文档。你可能会看着它说“但是 anchorOrigin 和 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 上可用的完整 Prop 是为 Menu、Popover 和 Modal 记录的所有 Prop 的组合.目前正在进行一些改进文档的工作，以提供对所有适用 Prop 的更直接访问:https://github.com/mui-org/material-ui/issues/18288 .