[pickers] Fix styling props propagation to DateTimePickerTabs

docs/pages/x/api/date-pickers/date-calendar.json

@@ -1,6 +1,7 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" } },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "components": {
       "type": { "name": "object" },
       "default": "{}",

docs/pages/x/api/date-pickers/date-picker-toolbar.json

@@ -12,8 +12,16 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "className": { "type": { "name": "string" } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
   },

docs/pages/x/api/date-pickers/date-range-calendar.json

@@ -5,6 +5,7 @@
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "2"
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "components": {
       "type": { "name": "object" },
       "default": "{}",

docs/pages/x/api/date-pickers/date-range-picker-toolbar.json

@@ -1,7 +1,15 @@
 {
   "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "className": { "type": { "name": "string" } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
   },

docs/pages/x/api/date-pickers/date-time-picker-tabs.json

@@ -18,6 +18,13 @@
       "type": { "name": "bool" },
       "default": "`window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`"
     },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
     "timeIcon": { "type": { "name": "node" }, "default": "Time" }
   },
   "name": "DateTimePickerTabs",

docs/pages/x/api/date-pickers/date-time-picker-toolbar.json

@@ -15,6 +15,13 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "className": { "type": { "name": "string" } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
   },

docs/pages/x/api/date-pickers/pickers-layout.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "components": {
       "type": { "name": "object" },
       "default": "{}",
@@ -20,6 +21,13 @@
       "type": { "name": "object" },
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
+    },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
     }
   },
   "name": "PickersLayout",

docs/pages/x/api/date-pickers/time-picker-toolbar.json

@@ -12,8 +12,16 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "className": { "type": { "name": "string" } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
   },

docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json

@@ -4,6 +4,7 @@
     "autoFocus": {
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "components": { "description": "Overridable components." },
     "componentsProps": { "description": "The props used for each component slot." },
     "dayOfWeekFormatter": {

docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json

@@ -1,12 +1,16 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "className": { "description": "className applied to the root component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."

docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json

@@ -5,6 +5,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "calendars": { "description": "The number of calendars to render." },
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "components": { "description": "Overridable components." },
     "componentsProps": { "description": "The props used for each component slot." },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },

docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json

@@ -1,8 +1,12 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "className": { "description": "className applied to the root component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."

docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json

@@ -8,6 +8,9 @@
       "description": "Callback called when a tab is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
     "timeIcon": { "description": "Time tab icon." },
     "view": { "description": "Currently visible picker view." }
   },

docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json

@@ -8,6 +8,9 @@
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."

docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json

@@ -1,11 +1,15 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "components": { "description": "Overridable components." },
     "componentsProps": { "description": "The props used for each component slot." },
     "orientation": { "description": "Force rendering in particular orientation." },
     "slotProps": { "description": "The props used for each component slot." },
-    "slots": { "description": "Overridable component slots." }
+    "slots": { "description": "Overridable component slots." },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    }
   },
   "classDescriptions": {
     "actionBar": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the action bar" },

docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json

@@ -1,12 +1,16 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "className": { "description": "className applied to the root component." },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
       "description": "Toolbar value placeholder—it is displayed when the value is empty."

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -617,6 +617,9 @@ DateRangeCalendar.propTypes = {
    * @default 2
    */
   calendars: PropTypes.oneOf([1, 2, 3]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts

@@ -131,6 +131,9 @@ export interface DateRangeCalendarProps<TDate>
    */
   calendars?: 1 | 2 | 3;
   className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DateRangeCalendarClasses>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -35,6 +35,9 @@ export interface DateRangePickerToolbarProps<TDate>
       'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'
     >,
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DateRangePickerToolbarClasses>;
 }
 
@@ -127,6 +130,9 @@ DateRangePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -141,6 +147,9 @@ DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
     PropTypes.func,

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -422,6 +422,9 @@ DateCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**

packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts

@@ -113,6 +113,9 @@ export interface DateCalendarProps<TDate>
    */
   referenceDate?: TDate;
   className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DateCalendarClasses>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx

@@ -105,6 +105,9 @@ export interface DayCalendarProps<TDate>
   hasFocus?: boolean;
   onFocusedViewChange?: (newHasFocus: boolean) => void;
   gridLabelId?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DayCalendarClasses>;
 }
 

packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx

@@ -14,6 +14,9 @@ export interface PickersFadeTransitionGroupProps {
   className?: string;
   reduceAnimations: boolean;
   transKey: React.Key;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<PickersFadeTransitionGroupClasses>;
 }
 

packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx

@@ -13,6 +13,9 @@ import {
 
 export type SlideDirection = 'right' | 'left';
 export interface ExportedSlideTransitionProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<PickersSlideTransitionClasses>;
 }
 export interface SlideTransitionProps

packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
-import { styled, SxProps, Theme, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
@@ -13,13 +14,17 @@ import {
 } from './datePickerToolbarClasses';
 import { resolveDateFormat } from '../internals/utils/date-utils';
 
-export interface DatePickerToolbarProps<TDate> extends BaseToolbarProps<TDate | null, DateView> {
+export interface DatePickerToolbarProps<TDate>
+  extends BaseToolbarProps<TDate | null, DateView>,
+    ExportedDatePickerToolbarProps {}
+
+export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DatePickerToolbarClasses>;
-  sx?: SxProps<Theme>;
 }
 
-export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {}
-
 const useUtilityClasses = (ownerState: DatePickerToolbarProps<any>) => {
   const { classes } = ownerState;
   const slots = {
@@ -72,6 +77,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar<TDa
     toolbarFormat,
     toolbarPlaceholder = '––',
     views,
+    className,
     ...other
   } = props;
   const utils = useUtils<TDate>();
@@ -95,7 +101,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar<TDa
       ref={ref}
       toolbarTitle={localeText.datePickerToolbarTitle}
       isLandscape={isLandscape}
-      className={classes.root}
+      className={clsx(classes.root, className)}
       {...other}
     >
       <DatePickerToolbarTitle
@@ -116,6 +122,9 @@ DatePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   /**
    * className applied to the root component.
@@ -136,6 +145,9 @@ DatePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
     PropTypes.func,