如何自定义 Material UI 选择组件？

Question

我有一个需要自定义的 MUI 选择组件。我将其渲染在深色背景上，并且需要轮廓及其所有内容均为浅色（即灰色和白色）。

我已设法将轮廓和文本内容设为浅色，但我不知道如何更改单击以打开和关闭选择选项的向下和向上箭头的颜色。如果你看我分享的屏幕截图，你几乎看不到向上箭头，因为它是黑色的。我该如何将其颜色更改为灰色或白色？

这就是我现在所拥有的：

<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

这就是我最终改变箭头图标颜色的方法。

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