如何自定义材质 UI select 组件？

Question

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 (ie grey and white).

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>

Answer 1

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

Like for example with makeStyle :

// 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 />}
/>

Answer 2

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>