如何更改在选择时打开的材质 ui 弹出框高度答案

【问题标题】：How to change the material ui popover height which gets open on select如何更改在选择时打开的材质 ui 弹出框高度
【发布时间】：2019-07-02 10:18:35
【问题描述】：

我想更改在材质 ui 中选择时打开的弹出框高度

我尝试通过 classes 属性传递样式，但没有帮助。如何提及在选择单击时打开的组件的样式。

<Select value={contCountrySelected} onChange={(event) => this.handleControllingCountryChange(event.target.value)} styleName= {'app.fbSelectTextPos'}
inputProps={{ name: 'controllingcountry', id: 'controllingcountry'}}>
{
    countryCodes.map((item) => (<MenuItem value={item.c2name} key={item.c2name}> {item.c2value} </MenuItem>
    ))
}
</Select>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这是一个使用Menu 的className 属性通过MenuProps Select 属性设置高度的示例：

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 => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  menu: {
    height: 300
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  function handleChange(event) {
    setAge(event.target.value);
  }

  return (
    <form className={classes.root} autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          MenuProps={{ className: classes.menu }}
          value={age}
          onChange={handleChange}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
          <MenuItem value={40}>Forty</MenuItem>
          <MenuItem value={50}>Fifty</MenuItem>
          <MenuItem value={60}>Sixty</MenuItem>
          <MenuItem value={70}>Seventy</MenuItem>
          <MenuItem value={80}>Eighty</MenuItem>
          <MenuItem value={90}>Ninety</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

【讨论】：