在 material-ui 中更改原色会导致 material-ui datepicker 崩溃答案

【问题标题】：Changing primary color in material-ui causes material-ui datepicker to crash在 material-ui 中更改原色会导致 material-ui datepicker 崩溃
【发布时间】：2021-01-04 18:07:17
【问题描述】：

我正在使用material-ui/pickers 库来添加datepicker。但它会引发以下异常。

我调查了该问题并了解到，如果我覆盖项目的主要颜色和次要颜色，则会引发错误。否则，选择器工作正常。

这就是我添加自定义原色和二次色的方式。

palette: {
    primary: {
        main: '#1D2951',
        contrastText: 'white',
    },
    secondary: {
        main: '#28D9C3',
        contrastText: 'white',
    },
},

我尝试使用不同版本的日期选择器，但无法解决问题。

库版本：

    "@material-ui/core": "^4.11.1",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",

【问题讨论】：

我想我可以解决问题，但您是否尝试使用#fff 代替白色？
是的，我在附加的调色板 sn-p 中添加了default : {background: '#fff' } 。没用。
所以你的意思是问题不会得到解决 bt contrastText: '#fff'？如果是，您能否添加有关错误发生位置的更多信息？
contrastText: '#fff' 在这里的影响为零。当日历组件即将打开时（点击日历图标后）触发该错误。
可能有两件事对您解决您遇到的这个问题有用。 1 & 2 在你的 material-ui/pickers datepicker 周围包装一个新的默认主题提供程序

标签： reactjs material-ui materialdatepicker

【解决方案1】：

尝试使用材质 UI 的内部调色板，像这样

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
  },
});

【讨论】：

使用材质调色板解决了这个错误。谢谢。但是如何将随机十六进制代码转换为材质调色板？我需要重新生成问题中提到的确切十六进制代码。
我相信错误来自将 contrastText 属性设置为“白色”，而不是十六进制值。无论哪种方式，您都应该用十六进制代码编写所有颜色值......它应该可以工作。
当我从共享的代码 sn-p 中删除 contrastText 属性时，错误仍然存在。我只需要覆盖从库中抛出错误的样式。
? 您能否提供有关您的设置、错误何时出现以及您尝试了什么的更多信息？？

【解决方案2】：

我刚刚在调色板 json 中添加了对比文本和默认背景颜色。

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#1D2951',
            contrastText: '#fff',
        },
        secondary: {
            main: '#28D9C3',
            contrastText: '#fff',
        },
        background: {
            default: '#fff'
        }
    },

虽然这可能与下一个版本无关，因为他们正在将库移动到 material-ui/core 库中。

【讨论】：