更改默认材质ui单选颜色

Question

我已经查看了与此相关的其他线程，但不幸的是，我无法更改材质ui默认的红色复选颜色。

下面是我的代码：

return (
<FormControl>
<FormLabel>{label}</FormLabel>
<RadioGroup row
name={name}
value={value}
onChange={onChange}
{
items.map(
item => (
<FormControlLabel key={item.id} value={item.id} control={<Radio />} label={item.title} />
)
)
}
</RadioGroup>
</FormControl>
)

我只是想能够将选中的收音机颜色从红色更改为蓝色。

我尝试了以下操作，但没有成功：

<Radio
{...props}
sx={{
'&, &.Mui-checked': {
color: 'blue',
},
}}
/>

Answer 1

因为使用了两个选择器&和&.Mui-checked，所以在未选中状态下覆盖复选框的颜色。因此，你应该去掉&，一切都会好起来：

<Radio
{...props}
sx={{
color: "red",
"&.Mui-checked": {
color: "green"
}
}}
/>

演示