Accepted answer

Below is an example showing how to customize the focus appearance of Select.

You can find some explanation about the underline customization in my answer here: 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({ []: });

  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>
          input={<Input classes={selectInputClasses} />}
            name: "age",
            id: "age-simple",
            classes: { select: }
          <MenuItem value="">
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>

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

export default withStyles(styles)(SimpleSelect);

Edit Select with focus styling changes


I don't know if I've understood the question correctly, but I think you can solve this using refs, as the React docs state:

[...] Managing focus, text selection, or media playback.

class MyComponent extends React.Component {
    constructor(props) {
        this.selector= React.createRef();
    render() {
        return <Selector ref={this.selector}>[...]</Selector>;

Then you can access the element itself by doing this.selector.current, and you can set (or unset) it's focus by doing this.selector.current.focus() or this.selector.current.blur() on Selector's element click. If what you want to do is to focus another element on click, you should get the ref for the element you want to focus and do it the same way.

I hope this is what you needed!

Related Query

More Query from same tag