(material-ui) Применить max-height к <Select>детям

Question

Я использую библиотеку реакции material-ui для рендеринга некоторых раскрывающихся меню с использованием компонентов <FormControl>, <Select> и <MenuItem>. Массив параметров для этого раскрывающегося меню довольно большой, и я хотел бы установить максимальную высоту в раскрывающемся списке, чтобы он не становился слишком большим. В настоящее время я изо всех сил пытаюсь сделать это, как я объясню ниже.

basi c раскрывающийся список с использованием 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>  
  )
}

Один из способов, который я нашел для установки максимальной высоты, - чтобы отобразить дочерние элементы <Select> в div, присвойте ему имя класса и примените к нему 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>
    ))
  )

поэтому в идеале я хотел бы иметь возможность контролировать как значение, так и максимальное -высота своих детей. Это вообще возможно? В документации material-ui на select нет такого примера, а список свойств компонента <Select не включает никаких полей для управления высотой. Спасибо за вашу помощь.

(На скриншотах выше показана эта проблема. На одном снимке экрана показано, что можно управлять максимальной высотой с помощью оболочки div, но это приводит к нарушению значения; на другом показано раскрывающееся меню без обертка div, что означает, что мы не можем установить максимальную высоту).

Answer 1

Высота, которой вы хотите управлять, - это элемент Paper, отображаемый элементом Popover внутри Menu.

Стили по умолчанию : maxHeight: 'calc(100% - 96px)'.

Ниже приведен один пример того, как это изменить:

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 стилей.