Material-ui DateRangePicker custom styling with Typescript

Viewed 321

I am using material ui DateRangePicker and want to customize MuiPickersDesktopDateRangeCalendar style. But I am unable to override this with global theme as this is not recognized in ThemeOptions with typescript.

I tried to override from this reference (https://next.material-ui-pickers.dev/guides/css-overrides), but I am getting below error "..is missing the following properties from type 'ThemeOptions': MuiPickersDesktopDateRangeCalendar, MuiPickersDay"

Option 1:

interface Theme {
//for typescript usage, I think it should go inside overrides, but there is no overrides option supported
    MuiPickersDesktopDateRangeCalendar: {
      arrowSwitcher: {
        padding: React.CSSProperties['padding']
      },
      calendar: {
        minWidth: React.CSSProperties['minWidth']
        minHeight: React.CSSProperties['minHeight']
      },
    },
    MuiPickersDay: {
      root: {
        width: React.CSSProperties['width']
        height: React.CSSProperties['height']
      },
    },
  }

interface ThemeOptions {
//for typescript usage, I think it should go inside overrides, but there is no overrides option supported
    MuiPickersDesktopDateRangeCalendar: {
      arrowSwitcher: {
        padding: React.CSSProperties['padding']
      },
      calendar: {
        minWidth: React.CSSProperties['minWidth']
        minHeight: React.CSSProperties['minHeight']
      },
    },
    MuiPickersDay: {
      root: {
        width: React.CSSProperties['width']
        height: React.CSSProperties['height']
      },
    },
  }

const theme = createMuiTheme({
overrides: {
    MuiPickersDesktopDateRangeCalendar: {
      arrowSwitcher: {
        padding: '0.8rem 0.8rem 0.4rem 0.8rem',
      },
      calendar: {
        minWidth: '20rem',
        minHeight: '19rem',
      },
    },
    MuiPickersDay: {
      root: {
        width: '1.4rem',
        height: '1.4rem',
      },
    },
  },
})

Option 2: There is no need to declare in theme interface, and upgrade @material-ui/core/styles to any specific version. I tried that as well, but it is not working. Please let me know if there is any compatible version of "@material-ui/core/styles" with "@material-ui/pickers": "^4.0.0-alpha.12".

0 Answers
Related