如何设置 Material-UI 中的 Select 组件在选择其中一项后失去焦点状态

Question

预期行为：

选择一个项目后，菜单列表将立即关闭，选择组件失去焦点状态，borderBottom变为1px 实心，backgroundColor变为白色。

当前行为：

选择项目后选择行为

如上图所示，borderBottom为2px 实心，backgroundColor不是白色，这表明 Select 组件处于焦点状态。

我应该怎么做才能达到预期的行为？

附加说明：

实际上，让我烦恼的是 Select 组件的焦点外观，而不是焦点本身，我想要的是像fonts.google.com中的行为。选择样式（例如 Bold 700）后，是的，Select 组件仍处于焦点状态，但它没有显示任何焦点迹象，而这正是我真正想要的。

Answer 1

下面是一个示例，展示了如何自定义 的焦点外观Select。

您可以在我的回答中找到有关下划线自定义的一些解释：How do I custom style the underline of Material-UI without using theme?

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
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 => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  selectInput: {
    "&:hover:not($disabled):not($focused):not($error):before": {
      borderBottomWidth: 1
    },
    "&:after": {
      borderBottomWidth: 1
    }
  },
  disabled: {},
  focused: {},
  error: {}
});

class SimpleSelect extends React.Component {
  state = {
    age: ""
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const { classes } = this.props;
    const selectInputClasses = {
      root: classes.selectInput,
      disabled: classes.disabled,
      focused: classes.focused,
      error: classes.error
    };

    return (
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          value={this.state.age}
          onChange={this.handleChange}
          input={<Input classes={selectInputClasses} />}
          inputProps={{
            name: "age",
            id: "age-simple",
            classes: { select: classes.select }
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    );
  }
}

SimpleSelect.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleSelect);