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

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

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

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

To change the color of Select component’s border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them.

For instance, we write:

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

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

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

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

We call makeStyles with a function that returns an object with the select property set to an object with the drop down styles.

We set the borderColor style of the '&:before' and '&:after' selector to set the color of the border of the select.

Next, we selector the icon class and set the fill CSS property to color to set the color of the drop down arrow.

Then we call useStyles to return the classes, which we apply by setting the className of the Select to classes.select to set the bottom border color of the Select.

And we set the inputProps to an object with the icon property set to classes.icon to make the drop down arrow red.

Conclusion

To change the color of Select component’s border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them.