Add MuiPickersBasePicker styles to the ts overrides definitions

[unutoiul]

I would like to remove the max-width: 325px to make center the calendar....but I can't find any of the following overrides.

any ideas:

export interface MuiPickersOverrides {
    MuiPickersDay?: Classes<typeof DayStyles>;
    MuiPickerDTHeader?: Classes<typeof DTHeaderStyles>;
    MuiPickerDTTabs?: Classes<typeof DTTabsStyles>;
    MuiPickersCalendar?: Classes<typeof CalendarStyles>;
    MuiPickersCalendarHeader?: Classes<typeof CalendarHeaderStyles>;
    MuiPickersSlideTransition?: Classes<typeof SlideTransitionStyles>;
    MuiPickersYearSelectionStyles?: Classes<typeof MuiPickersYearSelectionStyles>;
    MuiPickersYear?: Classes<typeof MuiPickersYearStyles>;
    MuiPickersMonthSelection?: Classes<typeof MuiPickersMonthSelectionStyles>;
    MuiPickersMonth?: Classes<typeof MuiPickersMonthStyles>;
    MuiPickersTimePickerToolbar?: Classes<typeof TimePickerToolbarStyles>;
    MuiPickersClock?: Classes<typeof ClockStyles>;
    MuiPickersClockNumber?: Classes<typeof ClockNumberStyles>;
    MuiPickersClockPointer?: Classes<typeof ClockPointerStyles>;
    MuiPickersModal?: Classes<typeof ModalDialogStyles>;
    MuiPickersToolbar?: Classes<typeof PickerToolbarStyles>;
    MuiPickersToolbarButton?: Classes<typeof ToolbarButtonStyles>;
    MuiPickersDatePickerRoot?: Classes<typeof DatePickerRootStyles>;
    MuiPickerDTToolbar?: Classes<typeof MuiPickerDTToolbarStyles>;
}

which one to use?

[MrBlue9]

having the same question. the standalone "calendar" component resizes according to the container width. the static datepicker does not. i'd use the calendar component but it doesn't have the ability to pick a year.

[dmtrKovalenko]

MuiPickersBasePicker: {
  pickerView: {
    maxWidth: 400
  },
}

This should work
UPD: Ohh it is missing in typings, but code should work

[dmtrKovalenko]

Lifehack you can just check the generated classnames to understand the component name

[MrBlue9]

works like a charm! i suppose the spacing between the numbers in the calendar is fixed width, right?

[dmtrKovalenko]

Yes, I think

[unutoiul]

how come is working for you guys, is not working for me the

   overrides: {
        MuiPickerBasePicker: {
            pickerView: {
                maxWidth: '500px',
            },
        },

can't be find

[MrBlue9]

it should work regardless of the error message. at least for me it worked nonetheless.

adding the following got rid of the error message for me. though i'm just starting to experiment with typescript and am not sure if this is the proper and "best" way to do so.

import { MuiPickersOverrides } from '@material-ui/pickers/typings/overrides';

type overridesNameToClassKey = {
  [P in keyof MuiPickersOverrides]: keyof MuiPickersOverrides[P];
};

type CustomType = {
  MuiPickersBasePicker: {
    pickerView: {
      maxWidth?: string;
    };
  };
};

declare module '@material-ui/core/styles/overrides' {
  interface ComponentNameToClassKey extends overridesNameToClassKey {}
  export interface ComponentNameToClassKey extends CustomType {}
}

[unutoiul]

works perfect now, thank you so much...

[AbdullahElrubi]

@dmtrKovalenko Are there any updates on the PR ?

[damir-sirola]

If somebody else encounters a TypeScript error in material-ui type definitions after using declare module from above, this small change fixed it for me

import { MuiPickersOverrides } from '@material-ui/pickers/typings/overrides';

type OverridesNameToClassKey = {
-    [P in keyof MuiPickersOverrides]: keyof MuiPickersOverrides[P];
+    [P in keyof Required<MuiPickersOverrides>]: keyof MuiPickersOverrides[P];
};

declare module '@material-ui/core/styles/overrides' {
    export interface ComponentNameToClassKey extends OverridesNameToClassKey {}
}