Feature theme augmentation

docs/pages/guides/typescript.mdx

@@ -81,3 +81,24 @@ In this case it is required to manually set proper [generic type manually](#gene
   onChange={newValue => newValue?.getDate()}
 />
 ```
+
+#### Theme augmentation
+
+In order to benefit from the [CSS overrides](https://material-ui.com/customization/globals/#css) and
+[default prop customization](https://material-ui.com/customization/globals/#default-props) with the theme,
+TypeScript users need to import the following types. Internally, it uses [module augmentation](https://material-ui.com/guides/typescript/#customization-of-theme)
+to extend the default theme structure with the extension components available in the pickers.
+
+```tsx
+import '@material-ui/pickers/themeAugmentation';
+
+const theme = createMuiTheme({
+  overrides: {
+    MuiPickersDatePicker: {
+      root: {
+        backgroundColor: 'red',
+      },
+    },
+  },
+});
+```

lib/src/DatePicker/DatePicker.ts

@@ -57,7 +57,7 @@ type DatePickerComponent<TWrapper extends SomeWrapper> = <TDate>(
 export const DatePicker = makePickerWithStateAndWrapper<BaseDatePickerProps<unknown>>(
   ResponsiveWrapper,
   {
-    name: 'MuiDatePicker',
+    name: 'MuiPickersDatePicker',
     ...datePickerConfig,
   }
 ) as DatePickerComponent<typeof ResponsiveWrapper>;
@@ -67,7 +67,7 @@ export type DatePickerProps = React.ComponentProps<typeof DatePicker>;
 export const MobileDatePicker = makePickerWithStateAndWrapper<BaseDatePickerProps<unknown>>(
   MobileWrapper,
   {
-    name: 'MuiMobileDatePicker',
+    name: 'MuiPickersMobileDatePicker',
     ...datePickerConfig,
   }
 ) as DatePickerComponent<typeof MobileWrapper>;
@@ -77,7 +77,7 @@ export type MobileDatePickerProps = React.ComponentProps<typeof MobileDatePicker
 export const DesktopDatePicker = makePickerWithStateAndWrapper<BaseDatePickerProps<unknown>>(
   DesktopWrapper,
   {
-    name: 'MuiDesktopDatePicker',
+    name: 'MuiPickersDesktopDatePicker',
     ...datePickerConfig,
   }
 );
@@ -87,7 +87,7 @@ export type DesktopDatePickerProps = React.ComponentProps<typeof DesktopDatePick
 export const StaticDatePicker = makePickerWithStateAndWrapper<BaseDatePickerProps<unknown>>(
   StaticWrapper,
   {
-    name: 'MuiStaticDatePicker',
+    name: 'MuiPickersStaticDatePicker',
     ...datePickerConfig,
   }
 ) as DatePickerComponent<typeof StaticWrapper>;

lib/src/DateRangePicker/DateRangePicker.tsx

@@ -170,17 +170,23 @@ export const DateRangePicker = makeRangePicker(
 export type DateRangePickerProps = React.ComponentProps<typeof DateRangePicker>;
 
 export const DesktopDateRangePicker = makeRangePicker(
-  'MuiDesktopDateRangePicker',
+  'MuiPickersDesktopDateRangePicker',
   DesktopTooltipWrapper
 );
 
 export type DesktopDateRangePickerProps = React.ComponentProps<typeof DesktopDateRangePicker>;
 
-export const MobileDateRangePicker = makeRangePicker('MuiMobileDateRangePicker', MobileWrapper);
+export const MobileDateRangePicker = makeRangePicker(
+  'MuiPickersMobileDateRangePicker',
+  MobileWrapper
+);
 
 export type MobileDateRangePickerProps = React.ComponentProps<typeof MobileDateRangePicker>;
 
-export const StaticDateRangePicker = makeRangePicker('MuiStaticDateRangePicker', StaticWrapper);
+export const StaticDateRangePicker = makeRangePicker(
+  'MuiPickersStaticDateRangePicker',
+  StaticWrapper
+);
 
 export type StaticDateRangePickerProps = React.ComponentProps<typeof StaticDateRangePicker>;
 

lib/src/DateTimePicker/DateTimePicker.tsx

@@ -122,7 +122,7 @@ type DateTimePickerComponent<TWrapper extends SomeWrapper> = <TDate>(
 export const DateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerProps<unknown>>(
   ResponsiveWrapper,
   {
-    name: 'MuiDateTimePicker',
+    name: 'MuiPickersDateTimePicker',
     ...dateTimePickerConfig,
   }
 ) as DateTimePickerComponent<typeof ResponsiveWrapper>;
@@ -132,7 +132,7 @@ export type DateTimePickerProps = React.ComponentProps<typeof DateTimePicker>;
 export const DesktopDateTimePicker = makePickerWithStateAndWrapper<
   BaseDateTimePickerProps<unknown>
 >(DesktopWrapper, {
-  name: 'MuiDesktopDateTimePicker',
+  name: 'MuiPickersDesktopDateTimePicker',
   ...dateTimePickerConfig,
 }) as DateTimePickerComponent<typeof DesktopWrapper>;
 
@@ -141,7 +141,7 @@ export type DesktopDateTimePickerProps = React.ComponentProps<typeof DesktopDate
 export const MobileDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerProps<unknown>>(
   MobileWrapper,
   {
-    name: 'MuiMobileDateTimePicker',
+    name: 'MuiPickersMobileDateTimePicker',
     ...dateTimePickerConfig,
   }
 ) as DateTimePickerComponent<typeof MobileWrapper>;
@@ -151,7 +151,7 @@ export type MobileDateTimePickerProps = React.ComponentProps<typeof MobileDateTi
 export const StaticDateTimePicker = makePickerWithStateAndWrapper<BaseDateTimePickerProps<unknown>>(
   StaticWrapper,
   {
-    name: 'MuiStaticDateTimePicker',
+    name: 'MuiPickersStaticDateTimePicker',
     ...dateTimePickerConfig,
   }
 ) as DateTimePickerComponent<typeof StaticWrapper>;

lib/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -50,7 +50,7 @@ export const useStyles = makeStyles(
       },
     };
   },
-  { name: 'MuiDateTimePickerTabs' }
+  { name: 'MuiPickersDateTimePickerTabs' }
 );
 
 const DateTimePickerTabs: React.FC<DateTimePickerTabsProps> = (props) => {

lib/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -10,7 +10,7 @@ import { withDefaultProps } from '../_shared/withDefaultProps';
 import { ToolbarComponentProps } from '../Picker/SharedPickerProps';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 
-const muiComponentConfig = { name: 'MuiDateTimePickerToolbar' };
+const muiComponentConfig = { name: 'MuiPickersDateTimePickerToolbar' };
 
 export const useStyles = makeStyles(
   {

lib/src/TimePicker/TimePicker.tsx

@@ -74,7 +74,7 @@ type TimePickerComponent<TWrapper extends SomeWrapper> = <TDate>(
 ) => JSX.Element;
 
 export const TimePicker = makePickerWithStateAndWrapper<BaseTimePickerProps>(ResponsiveWrapper, {
-  name: 'MuiTimePicker',
+  name: 'MuiPickersTimePicker',
   ...timePickerConfig,
 }) as TimePickerComponent<typeof ResponsiveWrapper>;
 
@@ -83,22 +83,22 @@ export type TimePickerProps = React.ComponentProps<typeof TimePicker>;
 export const DesktopTimePicker = makePickerWithStateAndWrapper<BaseTimePickerProps>(
   DesktopWrapper,
   {
-    name: 'MuiDesktopTimePicker',
+    name: 'MuiPickersDesktopTimePicker',
     ...timePickerConfig,
   }
 ) as TimePickerComponent<typeof DesktopWrapper>;
 
 export type DesktopTimePickerProps = React.ComponentProps<typeof DesktopTimePicker>;
 
 export const MobileTimePicker = makePickerWithStateAndWrapper<BaseTimePickerProps>(MobileWrapper, {
-  name: 'MuiMobileTimePicker',
+  name: 'MuiPickersMobileTimePicker',
   ...timePickerConfig,
 }) as TimePickerComponent<typeof MobileWrapper>;
 
 export type MobileTimePickerProps = React.ComponentProps<typeof MobileTimePicker>;
 
 export const StaticTimePicker = makePickerWithStateAndWrapper<BaseTimePickerProps>(StaticWrapper, {
-  name: 'MuiStaticTimePicker',
+  name: 'MuiPickersStaticTimePicker',
   ...timePickerConfig,
 });
 

lib/src/__tests__/typings.d.ts

@@ -1,9 +1 @@
-import { MuiPickersComponentsToClassName, MuiPickersComponentsPropsList } from '../typings';
-
-declare module '@material-ui/core/styles/overrides' {
-  export interface ComponentNameToClassKey extends MuiPickersComponentsToClassName {}
-}
-
-declare module '@material-ui/core/styles/props' {
-  export interface ComponentsPropsList extends MuiPickersComponentsPropsList {}
-}
+import '../themeAugmentation';

lib/src/typings/overrides.ts → lib/src/themeAugmentation/overrides.ts

@@ -51,8 +51,10 @@ export interface MuiPickersComponentsToClassName {
   MuiPickersDatePickerRoot: Classes<typeof DatePickerRootStyles>;
   MuiPickersBasePicker: Classes<typeof MuiBasePickerStyles>;
   MuiPickersModalDialog: Classes<typeof import('../_shared/PickersModalDialog').useStyles>;
-  MuiDateTimePickerTabs: Classes<typeof import('../DateTimePicker/DateTimePickerTabs').useStyles>;
-  MuiDateTimePickerToolbar: Classes<
+  MuiPickersDateTimePickerTabs: Classes<
+    typeof import('../DateTimePicker/DateTimePickerTabs').useStyles
+  >;
+  MuiPickersDateTimePickerToolbar: Classes<
     typeof import('../DateTimePicker/DateTimePickerToolbar').useStyles
   >;
   // consider using inline import type notation
@@ -66,3 +68,10 @@ export interface MuiPickersComponentsToClassName {
   MuiPickersCalendarSkeleton: Classes<typeof import('../CalendarSkeleton').useStyles>;
   MuiPickersPopper: Classes<typeof import('../_shared/PickersPopper').useStyles>;
 }
+
+declare module '@material-ui/core/styles/overrides' {
+  interface ComponentNameToClassKey extends MuiPickersComponentsToClassName {}
+}
+
+// disable automatic export
+export {};

lib/src/typings/props.ts → lib/src/themeAugmentation/props.ts

@@ -58,3 +58,10 @@ export interface MuiPickersComponentsPropsList {
   MuiPickersDateRangeDelimiter: DateRangeDelimiterProps;
   MuiPickersCalendarSkeleton: CalendarSkeletonProps;
 }
+
+declare module '@material-ui/core/styles/props' {
+  interface ComponentsPropsList extends MuiPickersComponentsPropsList {}
+}
+
+// disable automatic export
+export {};