(material-ui) 将 max-height 应用于 <Select> 子项

Question

我正在使用 material-ui react 库来渲染一些下拉菜单，使用<FormControl>,<Select>和<MenuItem>组件。这个下拉菜单的选项数组非常大，我想在下拉菜单上设置一个最大高度，所以它不会变得很大。我目前正在努力做到这一点，我将在下面解释。

使用 material-ui 的基本下拉菜单：

const MenuValidNotes = ({
  schedule,
  indexTrack,
  indexSchedule,
  actionSetTrackScheduleItemNote,
}) => {

  const listNotesMenu = () => (
    ARRAY_VALID_NOTES.map((noteObj, i) => (
      <MenuItem
        value={noteObj.note}
        key={`track-item-${indexTrack}-schedule-${indexSchedule}-note-${i}`}
        onClick={() => actionSetTrackScheduleItemNote(indexTrack, indexSchedule, noteObj.midiNumber)}
      >{noteObj.note}</MenuItem>
    ))
  )

  return(
    <div>
      <FormControl>
        <InputLabel>Note</InputLabel>
        <Select
          defaultValue={noteValueToNoteObject(schedule.noteValue).note}
        >
          {listNotesMenu()}
        </Select>
      </FormControl>
    </div>  
  )
}

我发现设置 max-height 的一种方法是<Select>在 div 中呈现子元素，给它一个类名并对其应用一些 CSS。

但是，该<Select>组件要求它的子组件是<MenuItem>s，所以有一个<div>around 会破坏value属性，这意味着它不会显示正确的值。（在阅读Material-UI 时发现这个Select e.target.value is undefined）

  const listNotesMenu = () => (
    ARRAY_VALID_NOTES.map((noteObj, i) => (
      <div className="..."> // this div will break the 'value' of the Select component 
         <MenuItem ... />
      </div>
    ))
  )

因此，理想情况下，我希望能够控制其子项的值和最大高度。这可能吗？select上的material-ui文档没有这样的例子，<Select组件的props列表也没有包含任何控制高度的字段。感谢您的帮助。

（上面的截图显示了这个问题。一个截图显示可以使用 div 包装器控制 max-height，但这破坏了值；另一个显示没有 div 包装器的下拉菜单，这意味着我们不能设置 max - 高度）。

Answer 1

您要控制的高度是 内的Paper元素呈现的Popover元素Menu。

该默认样式的maxHeight: 'calc(100% - 96px)'。

下面是一个如何在 Material-UI 的 v4 中覆盖它的示例（v5 示例进一步向下）：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  menuPaper: {
    maxHeight: 100
  }
}));

const VALID_NOTES = [
  "C",
  "C#",
  "D",
  "D#",
  "E",
  "F",
  "F#",
  "G",
  "G#",
  "A",
  "A#",
  "B"
];
export default function SimpleSelect() {
  const classes = useStyles();
  const [note, setNote] = React.useState("");

  const handleChange = event => {
    setNote(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Note</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={note}
          onChange={handleChange}
          MenuProps={{ classes: { paper: classes.menuPaper } }}
        >
          {VALID_NOTES.map(validNote => (
            <MenuItem value={validNote}>{validNote}</MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

关键方面是样式MenuProps={{ classes: { paper: classes.menuPaper } }}的定义menuPaper。

下面是一个类似的示例，但适用于 Material-UI 的 v5。此示例利用新sx道具进行样式设置。

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

const VALID_NOTES = [
  "C",
  "C#",
  "D",
  "D#",
  "E",
  "F",
  "F#",
  "G",
  "G#",
  "A",
  "A#",
  "B"
];
export default function SimpleSelect() {
  const [note, setNote] = React.useState("");

  const handleChange = (event) => {
    setNote(event.target.value);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, minWidth: 120 }} variant="standard">
        <InputLabel id="demo-simple-select-label">Note</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={note}
          onChange={handleChange}
          MenuProps={{ PaperProps: { sx: { maxHeight: 100 } } }}
        >
          {VALID_NOTES.map((validNote) => (
            <MenuItem value={validNote}>{validNote}</MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Answer 2

使用 MUI 4.12 的 2022 答案

如果这对您有帮助，那么上述答案都没有针对我们的用例构建正确的结构。我发现你只需要访问组件MenuProps上的Select。像这样：

<Select
...
   MenuProps={{
      style: {
         maxHeight: 400,
            },
      }}
>
</Select>