0

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",
eyepatch31
  • 77
  • 2
  • 10
  • I think I can get the problem right, but did you try to put #fff instead of white? – amirhe Jan 04 '21 at 18:20
  • Yes, I added `default : {background: '#fff' } ` in the palette snippet that I attached. Did not work. – eyepatch31 Jan 04 '21 at 18:26
  • so you mean the problem won't be fixed bt `contrastText: '#fff'`? If yes, could you add more information about where the error tirgered? – amirhe Jan 04 '21 at 18:37
  • `contrastText: '#fff'` has zero effect here sadly. The error triggers when the calendar component is about to open(after clicking the calendar icon). – eyepatch31 Jan 04 '21 at 19:04
  • 1
    there may be two things useful for your resolving this issue you have faced. [1](https://github.com/mui-org/material-ui-pickers/search?q=theme.palette) & 2 wrap a new default Theme provider around your material-ui/pickers datepicker – amirhe Jan 04 '21 at 20:29
  • Your comments helped me to realize what I needed to do. Thanks. I just searched the package repo and added the necessary style rules. – eyepatch31 Jan 07 '21 at 17:00
  • Thank GOD, it helped you, – amirhe Jan 07 '21 at 18:17

2 Answers2

1

Try using material UI's internal color palette, like so

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
  },
});
Victor Aiyeola
  • 21
  • 3
  • Using material color palette resolved the bug. Thanks. But how do I convert a random hex code into the material color palette? I need to re-produce the exact hex code mentioned in the question. – eyepatch31 Jan 05 '21 at 21:32
  • I believe the error was coming from setting the contrastText property as 'white', instead of a hex value. either way you should write all color values in hex code... It should work. – Victor Aiyeola Jan 09 '21 at 14:44
  • The error is still there when I remove `contrastText` property from the code snippet I shared. I just needed to override the styles which threw the error from the library. – eyepatch31 Jan 10 '21 at 03:58
  • Could you give more info on your setup, when the error comes on and what you've tried?? – Victor Aiyeola Jan 10 '21 at 15:10
0

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.

eyepatch31
  • 77
  • 2
  • 10