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\",
  bord         


        

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