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".