Material ui 在选择[Material UI]中更改所选项目的颜色

尝试更改材质ui选择的默认深蓝色会给我带来一些问题

例如，在此沙盒上，如何覆盖“本机选择”上的蓝色？我试着用下面的内容覆盖它，但没有用。当鼠标悬停在上方时，它会改变颜色，但当我选择它时，它会变回蓝色

  selected: {
    '& option:hover': {
      background: 'red',
    },
    '& option:active': {
      background: 'red',
    },
    '& option:focus': {
      background: 'red',
    }
  }

一,

编辑：

---

如果您在此处的要求是将颜色更改为“红色”以描述错误，那么您可以将“选择”组件中的“错误”属性传递为true。如果不是这样，我已经为您的用例做了一个变通方法

 const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  icon: {
    fill: "red"  //coloring the dropdown arrow icon
  },
  select: {
    // color: "red", //can be used to give color to options in the dropdown 
    "& option": {
      background: theme.palette.background.paper
    },
    "&:before": {
      borderColor: "red"
    },
    "&:after": {
      borderColor: "red"
    }
  }
});

此外，对于标签“年龄”的颜色（在您的代码沙盒中）

没有完全满足您的要求，但这应该可以帮助您完成着色部分。此外，这可能不是最漂亮的解决方案，但可以完成工作

---

查看相同的演示：

非常感谢您的回复！事实上，我似乎把代码笔的url弄乱了——对于我粘贴的url，这个问题没有多大意义：/我指的是这个代码笔中的本地select:。我也会编辑原始帖子。再次感谢您的帮助！

<InputLabel htmlFor="age-native-simple" style={{ color: "red" }}>