Question

由于某些原因，Menuprops属性对我不起作用，并且我无法更改下拉框的位置。请参阅我的代码，与其他相关问题所讨论的完全相同。

我希望Menuitmes下拉框显示在所选输入框的正下方，并且宽度与输入框相同。

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import Grid from "@material-ui/core/Grid";
import { IconButton, InputAdornment, OutlinedInput } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    // padding: "10px",
    width: "100%",
  },
  formControl: {
    // minWidth: 120,
    // width: '90%',
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    "& .MuiSelect-select": {
      fontSize: "12px",
      textAlign: "left",
      //padding: "6px 10px",
    },
    "& .MuiInputBase-root": {
      height: "45px",
      borderRadius: "5px",
    },
  },
  placeholderValue: {
    color: "#9F9F9F",
  },
  selectBox: {
    flex: 1,
  },
  selectEmpty: {
    flex: 1,
    marginTop: theme.spacing(2),
    background: "#fff",
    borderRadius: "22px",
    padding: "3px",
    textAlign: "center",
    "&:before, &:after,& .MuiSelect-icon": {
      display: "none",
    },
    "& .MuiSelect-select:focus": {
      background: "transparent",
    },
  },
  Icon: {
    color: "#26a0c9",
    marginRight: 5,
  },
  inputlabel: {
    fontSize: "12px",
    fontWeight: "bold",
    lineHeight: "1.33",
    color: "#7d7d7d",
    marginBottom: "10px",
    display: "block",
  },
  isRequired: {
    color: "#ff0000",
    marginLeft: "5px",
  },
}));

export default function SelectComp(props) {
  const classes = useStyles();
  const { StartIcon } = props;

  const handleChange = (event) => {
    props.handleChange(event);
  };

  return (
    <Grid container alignItems="flex-end" className={classes.root}>
      <Grid item xs={12}>
        <label htmlFor={props.name} className={classes.inputlabel}>
          {props.label}
          {props.isRequired ? (
            <span className={classes.isRequired}>*</span>
          ) : (
            <></>
          )}
        </label>
        <FormControl
          variant="outlined"
          className={classes.formControl}
          disabled={props.isDisable ? props.isDisable : false}
        >
          <Select
            value={props.value ? props.value : ""}
            onChange={(e) => handleChange(e)}
            // displayEmpty={props.displayEmpty || true}
            className={`${
              props.module === "timeline"
                ? classes.selectEmpty
                : classes.selectBox
            } ${props.className}`}
            inputProps={{ "aria-label": props.label }}
            name={props.name}
            startAdornment={
              props.StartIcon ? (
                <InputAdornment position="start">
                  <StartIcon />
                </InputAdornment>
              ) : (
                <></>
              )
            }
            MenuProps={{
              anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
              },
              getContentAnchorEl: null
            }}
          >
            {!props.value && (
              <MenuItem value={""} className={classes.placeholderValue}>
                {props.placeholder}
              </MenuItem>
            )}
            {props.options &&
              props.options.map((data) => {
                return (
                  <MenuItem value={data.value} key={data.value}>
                    {data.label}
                  </MenuItem>
                );
              })}
          </Select>
        </FormControl>
      </Grid>
    </Grid>
  );
}

Answer 1

经过一番尝试，我终于找到了问题所在。我的MenuItems数量很大，而没有先指定menuItems材质的最小高度css属性，即材料ui没有将选择下拉列表移动到输入框下方。

在将最小高度属性应用于选定输入下方的Paper组件之后，我能够解决此问题。

使用

 menuPaper: {
    maxHeight: 200
  }

为清楚起见，请发表评论并询问

材质ui选择组件下拉定位

1 个答案: