Material-ui-pickers: Overriding styles on createMuiTheme with Typescript

[felipe-vicente]

Hi,

I am using material-ui-pickers on a project here, but got a problem when trying to override all MuiPicker styles like (MuiPickersToolbar, MuiPickersCalendarHeader, ...), since they are not Typed on the posible override list of Material-Ui.

Is there a way to do it?

[dmtrKovalenko]

Ha ha ha. That’s really interesting issue.

[alitaheri]

Hmmm... Might be possible to implement a MuiThemeExtension That you can union with the MuiTheme types to make a type that includes the typings for overriding this library's styles.

A PR is welcome 🙏

[acro5piano]

My solution here.

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";

const materialTheme = createMuiTheme({
    typography: {
        display1: {
            fontSize: 24
        }
    }
});

const SomePicker = () => (
    <MuiThemeProvider theme={materialTheme}>
        <MuiPickersUtilsProvider>
            <DateTimePicker
                value={null}
                onChange={date => console.log(date)}
                format="MMMD日 HH時mm分"
            />
        </MuiPickersUtilsProvider>
    </MuiThemeProvider>
)

Create a material theme and apply it only in that area, instead of overriding MuiPicker theme (such as MuiPickersToolbar, MuiPickersCalendarHeader, ...). This way TypeScript says nothing.

[dmtrKovalenko]

https://github.com/mui-org/material-ui/pull/12400

[samfrank]

I get the same error when using TypeScript with material-ui-pickers

One way to get around the type error is to cast the override object as ThemeOptions

const datePickerTheme = createMuiTheme(theme as ThemeOptions);

[diegochavez]

By type augmentation can be removed this warning right, did someone find out how? Warning: Material-UI: you are trying to override a style that does not exist.
Fix the paper key of theme.overrides.MUIDataTable.