How to change color a of Select component’s border and arrow icon with React Material UI?

Sometimes, we want to change color a of Select component’s border and arrow icon with React Material UI.

In this article, we’ll look at how to change color a of Select component’s border and arrow icon with React Material UI.

How to change color a of Select component’s border and arrow icon with React Material UI?

To change color a of Select component’s border and arrow icon with React Material UI, we can call the makeStyles function with an object that has the styles for the before and after pseudoselectors.

For instance, we write:

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

const color = "blue";

const useStyles = makeStyles({
  select: {
    "&:before": {
      borderColor: color
    },
    "&:after": {
      borderColor: color
    }
  },
  icon: {
    fill: color
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <Select
      className={classes.select}
      inputProps={{
        classes: {
          icon: classes.icon,
          root: classes.root
        }
      }}
      value="1"
    >
      <MenuItem value="1"> Foo 1</MenuItem>
      <MenuItem value="2"> Foo 2</MenuItem>
    </Select>
  );
}

We call makeStyles with an object that has the class name of as the root level properties.

We set the properties to an object that set the '&:before' and '&:after' properties to set the border color of the drop down.

Next, we set the icon color by setting the icon property to an object that sets the fill property to a color.

Then to apply the styles, we call the useStyles hook to return the classes object.

Then we et the className of the Select component to classes.select to set the select drop down’s border color.

And we set the inputProps to an object with the classes.icon property to set the icon’s color.

Now the arrow and bottom border should both be blue.

How to change color a of Select component’s border and arrow icon with React Material UI?

Conclusion