Material UI 在无法识别的主题中添加自定义颜色

Question

我正在尝试使用 Material UI 在 React 中使用自定义颜色创建自定义主题。当我创建自定义主题并在控制台中查看它时，我可以看到新颜色及其值。但是当我尝试在一个组件中引用它时，在我的例子中是一个 Switch，我得到以下错误

index.js:1 警告：道具类型失败：提供给 ForwardRef(Switch) 的价值 neutral 的道具 color 无效，应为 ["default","primary" ","二级"]

当我将颜色设置为“主要”或“次要”时，我得到了预期的颜色。它似乎不允许我创建的新颜色。

这是我的主题：

import { createMuiTheme } from "@material-ui/core/styles";

const customTheme = createMuiTheme({
    palette: {
        primary: {
            main: "#33d9b2"
        },
        secondary: {
            main: "#40407a"
        },
        neutral: {
            main: "#ff793f"
        }
    }
});

export default customTheme;

这是我的 Switch 组件：

<FormGroup>
   <FormControlLabel
        control={<Switch color="neutral" checked={this.props.isChecked} onChange={this.handleToggleChecked} />}
        label="2018 Tracks">
   </FormControlLabel>
</FormGroup>

Answer 1

再见，根据 Material UI Switch docs，color 属性仅接受 default、primary 或 secondary 值。

如果您想用 neutral 颜色进行切换，则必须进行自定义切换。类似于：

import { withStyles } from '@material-ui/core/styles';
...
const NeutralSwitch = withStyles({
    switchBase: {
        color: "#808080",  //grey if unchecked
        '&$checked': {
            color: "#ff793f",   //neutral color
        },
        '&$checked + $track': {
            backgroundColor: "#ff793f",   //neutral color
        },
    },
    checked: {},
    track: {},
})(Switch);

Material UI 在无法识别的主题中添加自定义颜色

Material UI Adding Custom Color in Theme Not Recognized

themes

colors

reactjs

material-ui