Material-UI-将最大高度应用于选择子对象

我正在使用Material-UI Reaction库呈现一些下拉菜单，使用<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>  
  )
}

我发现设置最大高度的一种方法是在div中呈现<Select>的子项，为其指定一个类名并对其应用一些CSS。

但是，<Select>组件要求其子级是<MenuItem>s，因此使用<div>会破坏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组件的道具列表没有任何控制高度的字段。感谢您的帮助。

(上面的屏幕截图显示了此问题。其中一个屏幕截图显示可以使用div包装器控制最大高度，但这会破坏该值；另一个屏幕截图显示没有div包装器的下拉列表，这意味着我们不能设置最大高度)。

---

解决方案

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

default styles是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样式的定义。

---

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

import React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/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>
  );
}