Как настроить выделение выпадающего MUI бумаги CSS - PullRequest
Новая
       11

Как настроить выделение выпадающего MUI бумаги CSS

1 голос
/ 25 марта 2019

Я использую Material UI для своего реактивного проекта и использую раскрывающийся список, который был показан в документации Material UI.При щелчке по первому набору выпадающего меню появляется всплывающая бумага Material UI с опциями, перекрывающими сам элемент select.Как сделать так, чтобы всплывающее окно было немного ниже элемента select, чтобы оно не перекрывалось с помощью пользовательской темы? 

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

1 Ответ

0 голосов
/ 25 марта 2019

В настоящее время нет простого способа сделать это. Вы обращаетесь к варианту «раскрывающийся список» . Мы говорили о поддержке этого в будущем, но пройдет несколько месяцев, прежде чем я над этим поработаю.

Этого можно достичь, указав элемент привязки контента и положение Popover относительно него, но заставить его работать в разных сценариях будет сложно без улучшений в Material-UI.

Одной из альтернатив является использование «нативного» выбора (https://material -ui.com / demos / select / # native-select ), но это приводит к совершенно другому взгляду на опции с только минимальные возможности настройки.

...