CODEWITHSUNDEEP
cssreactjsmaterial-ui
Jevon Cochran
Jevon Cochran

Reputation: 1774

How do you customize the material UI select component?

I have a MUI select component that I need to customize. I am rendering it on a dark background and there I need the outline and all its contents to be light colors (i.e. grey and white).

enter image description here

I have managed to get the outline and the text contents to be light colors but I cannot figure out how to change the colors of the down and up arrows that you click on to open and close the select options. If you look at the screenshot I shared, you can barely even see the up arrow because it is black. How would I go about changing the color of that to grey or white?

This is what I have now:

<Select
    variant="outlined"
    sx={{
    width: 100,
    height: 40,
    marginRight: 15,
    border: "1px solid darkgrey",
    color: "#fff",
    }}
    value={currency}
    onChange={(e) => setCurrency(e.target.value)}
>
    <MenuItem value={"USD"}>USD</MenuItem>
    <MenuItem value={"INR"}>INR</MenuItem>
</Select>

Upvotes: 6

Views: 27662

Answers (2)

colinD
colinD

Reputation: 2039

You can use the icon css class from the select (or iconOutlined in your case).

Like for example with makeStyle.
Outdated for material-ui 5, see comment and the other answer.

// outside the component
const useStyles = makeStyles(() =>
  createStyles({
    iconClassName: {
      fill: "red",
    },
  })
);

...

// later in the component
const classes = useStyles();

<Select 
  classes={{ iconOutlined: classes.iconClassName }}
/>

Another option is to use the IconComponent props an completely replace the icon:

<Select 
  IconComponent={<YourComponentHere />}
/>

Upvotes: 2

Jevon Cochran
Jevon Cochran

Reputation: 1774

This is how I ended up changing the color of the arrow icon.

<Select
    variant="outlined"
    sx={{
    width: 100,
    height: 40,
    marginRight: 15,
    border: "1px solid darkgrey",
    color: "#fff",
    "& .MuiSvgIcon-root": {
        color: "white",
    },
    }}
    value={currency}
    onChange={(e) => setCurrency(e.target.value)}
>
    <MenuItem value={"USD"}>USD</MenuItem>
    <MenuItem value={"INR"}>INR</MenuItem>
</Select>

Upvotes: 11

Related Questions