Search code examples
reactjsmaterial-uimaterialdatepicker

Changing primary color in material-ui causes material-ui datepicker to crash

I am using the material-ui/pickers library to add a datepicker. but it throws the following exception.

"enter image description here

I investigated the issue and understood that, if I override the primary and secondary colour for the project, it throws the error. Otherwise, the picker works fine.

This is how I added custom primary and secondary colors.

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

I tried with different versions of the datepicker but could not resolve the issue.

Library versions:

    "@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",
Solution

  • I just added contrast text and default background color in the palette json.

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

    Though this may not be relevant at the next release as they are moving the library in the material-ui/core library.