Material-ui-pickers: Add MuiPickersBasePicker styles to the ts overrides definitions

Created on 5 Dec 2019  路  10Comments  路  Source: mui-org/material-ui-pickers

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;
MuiPickerDTHeader?: Classes;
MuiPickerDTTabs?: Classes;
MuiPickersCalendar?: Classes;
MuiPickersCalendarHeader?: Classes;
MuiPickersSlideTransition?: Classes;
MuiPickersYearSelectionStyles?: Classes;
MuiPickersYear?: Classes;
MuiPickersMonthSelection?: Classes;
MuiPickersMonth?: Classes;
MuiPickersTimePickerToolbar?: Classes;
MuiPickersClock?: Classes;
MuiPickersClockNumber?: Classes;
MuiPickersClockPointer?: Classes;
MuiPickersModal?: Classes;
MuiPickersToolbar?: Classes;
MuiPickersToolbarButton?: Classes;
MuiPickersDatePickerRoot?: Classes;
MuiPickerDTToolbar?: Classes;
}

which one to use?

Most helpful comment

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

All 10 comments

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.

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

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

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

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

Yes, I think

Screenshot 2019-12-05 at 10 54 40

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

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

can't be find

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 {}
}

works perfect now, thank you so much...

@dmtrKovalenko Are there any updates on the PR ?

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 {}
}

Was this page helpful?
0 / 5 - 0 ratings