如何自定义选择下拉MUI纸张CSS

Question

我正在为我的 React 项目使用 Material UI，并使用 Material UI 文档中显示的选择下拉列表。单击第一组选择下拉菜单时，会弹出一个 Material UI 纸张，其中的选项与选择元素本身重叠。如何使用自定义主题将弹出窗口放在选择元素下方一点，以便它不会重叠？

    import React from 'react';
    import ReactDOM from 'react-dom';
    import PropTypes from 'prop-types';
    import { withStyles } from '@material-ui/core/styles';
    import OutlinedInput from '@material-ui/core/OutlinedInput';
    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 styles = theme => ({
      root: {
        display: 'flex',
        flexWrap: 'wrap',
      },
      formControl: {
        margin: theme.spacing.unit,
        minWidth: 120,
      },
    });
    
    class SimpleSelect extends React.Component {
      state = {
        age: '',
        labelWidth: 0,
      };
    
      componentDidMount() {
        this.setState({
          labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
        });
      }
    
      handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
      };
    
      render() {
        const { classes } = this.props;
    
        return (
          <form className={classes.root} autoComplete="off">
            <FormControl className={classes.formControl}>
              <InputLabel htmlFor="age-simple">Age</InputLabel>
              <Select
                value={this.state.age}
                onChange={this.handleChange}
                inputProps={{
                  name: 'age',
                  id: 'age-simple',
                }}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            </FormControl>
            
            
            
            
            <FormControl variant="outlined" className={classes.formControl}>
              <InputLabel
                ref={ref => {
                  this.InputLabelRef = ref;
                }}
                htmlFor="outlined-age-simple"
              >
                Age
              </InputLabel>
              <Select
                value={this.state.age}
                onChange={this.handleChange}
                input={
                  <OutlinedInput
                    labelWidth={this.state.labelWidth}
                    name="age"
                    id="outlined-age-simple"
                  />
                }
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            </FormControl>
            
          </form>
        );
      }
    }
    
    SimpleSelect.propTypes = {
      classes: PropTypes.object.isRequired,
    };
    
    export default withStyles(styles)(SimpleSelect);

Answer 1

您可以通过继承自PopoveranchorOrigin的和getContentAnchorEl Menuprops获得这种外观。Menu

以下是自定义单个 Select 的工作示例：

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";

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

  const handleChange = (event) => {
    setAge(event.target.value);
  };
  const menuProps = {
    getContentAnchorEl: null,
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left"
    }
  };
  return (
    <div>
      <FormControl style={{ margin: "8px", minWidth: "120px" }}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
          MenuProps={menuProps}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

这是通过主题执行相同操作的示例：

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";
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const menuProps = {
  getContentAnchorEl: null,
  anchorOrigin: {
    vertical: "bottom",
    horizontal: "left"
  }
};
const theme = createMuiTheme({
  props: {
    MuiSelect: {
      MenuProps: menuProps
    }
  }
});

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

  const handleChange = (event) => {
    setAge(event.target.value);
  };
  return (
    <ThemeProvider theme={theme}>
      <div>
        <FormControl style={{ margin: "8px", minWidth: "120px" }}>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            onChange={handleChange}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </div>
    </ThemeProvider>
  );
}

相关答案：如何使下拉菜单出现在Material-UI中栏的正下方？