在“选择[材料界面]”中更改所选项目的颜色

Question

尝试更改材质用户界面选择的默认深蓝色会给我一些问题。

例如在此沙盒1上，如何覆盖“本机选择”上的蓝色？我尝试用下面的方法覆盖它，但无济于事。当鼠标悬停时，它会更改颜色，但是当我选择它时，它会变回蓝色。

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

1 https://codesandbox.io/s/cwvg4?file=/demo.js

编辑：

Answer 1

如果您的要求是将颜色更改为“红色”以表示错误，则可以在“选择”组件中将“错误”属性传递为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"
    }
  }
});

此外，对于标签“年龄”的颜色（在您的CodeSandBox中）

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

并没有完全满足您的要求，但这应该可以帮助您解决着色问题，这也许不是最漂亮的解决方案，但是可以完成工作！

查看相同的演示：https://codesandbox.io/s/green-sunset-oyhm8?file=/src/demo.js:977-1042