reactjs - Material-UI 4.1.2 Styling Select SelectInput

Question

I want to alter the style of the SelectInput. I'm using a class based component. I set it up this way:

const QuoteListStyle = {
  color: "#eceff1",
  borderBottom: "1px solid #90caf9",
  "&:hover:not($disabled):not($focused):not($error) $underline": {
    borderBottom: "2px solid #90caf9"
  },
  width: "196px",
  marginTop: "1rem"
};

Then in the render I have this section with the Select:

<FormControl>
                    <Select
                      style={QuoteListStyle}
                      value={this.state.quoteListName}
                      onChange={this.handleChange}
                      displayEmpty={true}
                      renderValue={
                        this.state.quoteListName > 0
                          ? undefined
                          : () => <em>{this.state.quoteListName}</em>
                      }
                    >
                      <MenuItem value="" disabled>
                        <em>Select a Quote List</em>
                      </MenuItem>

                      {data.me.quoteList.map(item => {
                        return (
                          <MenuItem value={item.name} key={item.name}>
                            {item.name}
                          </MenuItem>
                        );
                      })}
                    </Select>
                  </FormControl>

I'm using the basic Select component that only has an underline. I want to change the color and size of the underline. I looked here in the source:

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/SelectInput.js

What do I look for to control the underline? I am seeing the underline that I want when the component loads. The hover is not working. After an item from the Select is chosen, I see my style on top but the default style is below and I can see some of that color.

I would be ok using overrides for this. Here's my theme code:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#90caf9",
      contrastText: "#f5f5f5"
    },
    secondary: {
      main: "#19857b"
    },
    error: {
      main: "#f44336"
    },
    background: {
      default: "#102027",
      paper: "#37474f"
    },
    text: {
      primary: "#eceff1",
      secondary: "#90caf9"
    },
    button: {
      borderColor: "#90caf9"
    }
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "#90caf9"
        },
        "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
          borderColor: "#90caf9",
          borderWidth: 2
        },
        "&$focused $notchedOutline": {
          borderColor: "#90caf9"
        }
      },
      notchedOutline: {}
    },
    MuiSelect: {
      icon: {
        fill: "#90caf9"
      }
    }
  }
});

export default theme;

I also looked in the devtools and found this:

<div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect" aria-pressed="false" tabindex="0" role="button" aria-haspopup="true"><em>Tech</em></div>

I'm not sure how to use that to target what I want.

Answer 1

You can't target other rules or pseudo-classes (e.g. "&:hover:not($disabled):not($focused):not($error) $underline") in inline styles. Instead you need to use CSS classes (e.g. via makeStyles for function components or withStyles can be used with both class and function components).

The styles you need to customize are within Input. Below is an example of how to customize the underline.

You can read more about this in my related answers:

• How do I custom style the underline of Material-UI without using theme?
• How to change color border bottom blue line to green green line in select field using react js?

import React from "react";
import ReactDOM from "react-dom";

import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  select: {
    "&:before": {
      // normal
      borderBottom: "1px solid orange"
    },
    "&:after": {
      // focused
      borderBottom: `3px solid green`
    },
    "&:hover:not(.Mui-disabled):not(.Mui-focused):not(.Mui-error):before": {
      // hover
      borderBottom: `2px solid purple`
    }
  }
});

const App = () => {
  const [age, setAge] = React.useState("");

  const classes = useStyles();
  return (
    <div className="wrapper">
      <FormControl style={{ minWidth: "200px" }}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          className={classes.select}
          value={age}
          onChange={event => setAge(event.target.value)}
          inputProps={{
            name: "age",
            id: "age-simple"
          }}
        >
          <MenuItem value="" disabled />
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);