css - 怎么自定义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>