[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 } },
     "dayOfWeekFormatter": {
       "type": { "name": "func" },
       "default": "(_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()",

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

@@ -12,7 +12,15 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "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

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

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

@@ -1,6 +1,14 @@
 {
   "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "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

@@ -7,6 +7,13 @@
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "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": "\"––\"" },
     "toolbarTitle": { "type": { "name": "node" } },

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

@@ -18,6 +18,13 @@
       "type": { "name": "bool" },
       "default": "`window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`"
     },
+    "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": "element" }, "default": "TimeIcon" }
   },
   "name": "DateTimeRangePickerTabs",

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

@@ -12,7 +12,15 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "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 } },
     "orientation": {
       "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
     },
@@ -8,6 +9,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,7 +12,15 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "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." },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",
       "typeDescriptions": {

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

@@ -1,11 +1,15 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the 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

@@ -8,6 +8,7 @@
       "description": "Range positions available for selection. This list is checked against when checking if a next range position can be selected.<br>Used on Date Time Range pickers with current <code>rangePosition</code> to force a <code>finish</code> selection after just one range position selection."
     },
     "calendars": { "description": "The number of calendars to render." },
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",

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

@@ -1,7 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the 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

@@ -7,6 +7,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/date-time-range-picker-tabs/date-time-range-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-range-picker-toolbar/date-time-range-picker-toolbar.json

@@ -1,11 +1,15 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the 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/pickers-layout/pickers-layout.json

@@ -1,9 +1,13 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "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": {
     "contentWrapper": {

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

@@ -1,11 +1,15 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the 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

@@ -659,6 +659,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

@@ -130,6 +130,9 @@ export interface DateRangeCalendarProps<TDate extends PickerValidDate>
    */
   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

@@ -36,6 +36,9 @@ export interface DateRangePickerToolbarProps<TDate extends PickerValidDate>
       'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'
     >,
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DateRangePickerToolbarClasses>;
 }
 
@@ -128,6 +131,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: PropTypes.string,
   disabled: PropTypes.bool,
@@ -139,6 +145,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-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx

@@ -119,6 +119,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
     rangePosition,
     onRangePositionChange,
     className,
+    sx,
   } = props;
 
   const localeText = useLocaleText();
@@ -166,7 +167,11 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
   }
 
   return (
-    <DateTimeRangePickerTabsRoot ownerState={props} className={clsx(classes.root, className)}>
+    <DateTimeRangePickerTabsRoot
+      ownerState={props}
+      className={clsx(classes.root, className)}
+      sx={sx}
+    >
       {!isPreviousHidden ? (
         <IconButton
           onClick={changeToPreviousTab}
@@ -229,6 +234,14 @@ DateTimeRangePickerTabs.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
+  /**
+   * 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,
+    PropTypes.object,
+  ]),
   /**
    * Time tab icon.
    * @default TimeIcon

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx

@@ -46,6 +46,9 @@ export interface DateTimeRangePickerToolbarProps<TDate extends PickerValidDate>
 }
 
 export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DateTimeRangePickerToolbarClasses>;
 }
 
@@ -195,6 +198,9 @@ DateTimeRangePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -214,6 +220,9 @@ DateTimeRangePickerToolbar.propTypes = {
   onViewChange: 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

@@ -416,6 +416,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

@@ -102,6 +102,9 @@ export interface DateCalendarProps<TDate extends PickerValidDate>
    */
   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.