如何自定义材质 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>

Answer 2

您可以使用选择中的iconcss class（或iconOutlined，在您的情况下）。

例如makeStyle。
material-ui 5 已过时，请参阅评论和其他答案。

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

...

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

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

另一种选择是使用IconComponent props 一个完全替换的图标：

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