From 6075bdc2534d4f9e8951625c15fccb379e6775de Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 12:26:39 +0200
Subject: [PATCH 01/10] [pickers] Fix styling props propagation to
 `DateTimePickerTabs`

---
 .../src/DateTimePicker/DateTimePickerTabs.tsx         | 11 ++++++-----
 .../x-date-pickers/src/internals/models/props/tabs.ts |  3 +++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
index 1fd7f5ffc01fc..05421467bdbbf 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -49,17 +49,16 @@ export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
    * @default Time
    */
   timeIcon?: React.ReactNode;
-}
-
-export interface DateTimePickerTabsProps
-  extends ExportedDateTimePickerTabsProps,
-    BaseTabsProps<DateOrTimeViewWithMeridiem> {
   /**
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<DateTimePickerTabsClasses>;
 }
 
+export interface DateTimePickerTabsProps
+  extends ExportedDateTimePickerTabsProps,
+    BaseTabsProps<DateOrTimeViewWithMeridiem> {}
+
 const useUtilityClasses = (ownerState: DateTimePickerTabsProps) => {
   const { classes } = ownerState;
   const slots = {
@@ -103,6 +102,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
+    sx,
   } = props;
 
   const localeText = useLocaleText();
@@ -123,6 +123,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
       value={viewToTab(view)}
       onChange={handleChange}
       className={clsx(className, classes.root)}
+      sx={sx}
     >
       <Tab
         value="date"
diff --git a/packages/x-date-pickers/src/internals/models/props/tabs.ts b/packages/x-date-pickers/src/internals/models/props/tabs.ts
index cb9e46e65b180..73c7cad81cc19 100644
--- a/packages/x-date-pickers/src/internals/models/props/tabs.ts
+++ b/packages/x-date-pickers/src/internals/models/props/tabs.ts
@@ -1,3 +1,5 @@
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
 
 export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
@@ -15,4 +17,5 @@ export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
 
 export interface ExportedBaseTabsProps {
   className?: string;
+  sx?: SxProps<Theme>;
 }

From 3d5cf257b41f2dec0eaf2c54047aa8c47352c663 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 12:29:43 +0200
Subject: [PATCH 02/10] propagate `sx` to `DateTimeRangePickerTabs`

---
 .../src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
index 07e8256c39e3a..5ded79c38b8c2 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
+++ b/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}

From f3890c346c7876cdcafaa9c2dde6047139dfac46 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 12:38:09 +0200
Subject: [PATCH 03/10] Expose `classes` prop on `DateTImePickerToolbar`

---
 .../src/DateTimePicker/DateTimePickerToolbar.tsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index b622fa791f990..0296e6969ed8a 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -25,15 +25,15 @@ import { PickerValidDate } from '../models';
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
   ampm?: boolean;
   ampmInClock?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateTimePickerToolbarClasses>;
 }
 
 export interface DateTimePickerToolbarProps<TDate extends PickerValidDate>
   extends ExportedDateTimePickerToolbarProps,
     MakeOptional<BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<DateTimePickerToolbarClasses>;
   toolbarVariant?: WrapperVariant;
   /**
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.

From e3346a444ea0e957dbe1376bf018c6925937f985 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 12:44:00 +0200
Subject: [PATCH 04/10] Fix `className` and `classes` behavior on
 `DatePickerToolbar`

---
 .../src/DatePicker/DatePickerToolbar.tsx           | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index aaaaeb64d01cc..17e2dd2a9d3f4 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/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';
@@ -14,13 +15,13 @@ import {
 import { resolveDateFormat } from '../internals/utils/date-utils';
 
 export interface DatePickerToolbarProps<TDate extends PickerValidDate>
-  extends BaseToolbarProps<TDate | null, DateView> {
+  extends BaseToolbarProps<TDate | null, DateView>,
+    ExportedDatePickerToolbarProps {}
+
+export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
   classes?: Partial<DatePickerToolbarClasses>;
-  sx?: SxProps<Theme>;
 }
 
-export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {}
-
 const useUtilityClasses = (ownerState: DatePickerToolbarProps<any>) => {
   const { classes } = ownerState;
   const slots = {
@@ -72,6 +73,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar<
     toolbarFormat,
     toolbarPlaceholder = '––',
     views,
+    className,
     ...other
   } = props;
   const utils = useUtils<TDate>();
@@ -95,7 +97,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar<
       ref={ref}
       toolbarTitle={localeText.datePickerToolbarTitle}
       isLandscape={isLandscape}
-      className={classes.root}
+      className={clsx(classes.root, className)}
       {...other}
     >
       <DatePickerToolbarTitle

From a05fbca7b484f57904b49ea565cbe9e7846051b6 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 13:32:22 +0200
Subject: [PATCH 05/10] Fix `className` and `classes` behavior on
 `TimePickerToolbar`

---
 .../src/TimePicker/TimePickerToolbar.tsx           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
index 78614cdb22f21..a56aea503a9fc 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useTheme, styled, Theme, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -19,15 +20,17 @@ import { formatMeridiem } from '../internals/utils/date-utils';
 import { PickerValidDate } from '../models';
 
 export interface TimePickerToolbarProps<TDate extends PickerValidDate>
-  extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem> {
+  extends BaseToolbarProps<TDate | null, TimeViewWithMeridiem>,
+    ExportedTimePickerToolbarProps {
   ampm?: boolean;
   ampmInClock?: boolean;
-  classes?: Partial<TimePickerToolbarClasses>;
 }
 
 export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps {
-  ampm?: boolean;
-  ampmInClock?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TimePickerToolbarClasses>;
 }
 
 const useUtilityClasses = (ownerState: TimePickerToolbarProps<any> & { theme: Theme }) => {
@@ -167,6 +170,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
     views,
     disabled,
     readOnly,
+    className,
     ...other
   } = props;
   const utils = useUtils<TDate>();
@@ -198,7 +202,7 @@ function TimePickerToolbar<TDate extends PickerValidDate>(inProps: TimePickerToo
       toolbarTitle={localeText.timePickerToolbarTitle}
       isLandscape={isLandscape}
       ownerState={ownerState}
-      className={classes.root}
+      className={clsx(classes.root, className)}
       {...other}
     >
       <TimePickerToolbarHourMinuteLabel className={classes.hourMinuteLabel} ownerState={ownerState}>

From 6a64e19331e03872b35faeb4473aa4b845eeee14 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 14:33:56 +0200
Subject: [PATCH 06/10] Add missing `classes` prop JSDoc

---
 .../src/DateRangeCalendar/DateRangeCalendar.types.ts           | 3 +++
 .../src/DateRangePicker/DateRangePickerToolbar.tsx             | 3 +++
 .../src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx     | 3 +++
 packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts | 3 +++
 packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx       | 3 +++
 .../src/DateCalendar/PickersFadeTransitionGroup.tsx            | 3 +++
 .../x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx | 3 +++
 packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx   | 3 +++
 .../x-date-pickers/src/PickersLayout/PickersLayout.types.ts    | 3 +++
 .../PickersArrowSwitcher/PickersArrowSwitcher.types.tsx        | 3 +++
 .../x-date-pickers/src/internals/components/PickersPopper.tsx  | 3 +++
 11 files changed, 33 insertions(+)

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts
index b79cbe3a8a570..61aeb650da085 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts
+++ b/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.
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
index 149bc4c9bf069..12f242315c672 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/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>;
 }
 
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index 1af69fa551241..b2a0fcd4562ea 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/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>;
 }
 
diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
index fec30c35f9302..c909e8e9e1710 100644
--- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
+++ b/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.
diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
index e388c1590632b..9f6ec8d286aee 100644
--- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
@@ -103,6 +103,9 @@ export interface DayCalendarProps<TDate extends PickerValidDate>
   hasFocus?: boolean;
   onFocusedViewChange?: (newHasFocus: boolean) => void;
   gridLabelId?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DayCalendarClasses>;
   /**
    * Overridable component slots.
diff --git a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx b/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx
index f82497ffc0199..584a245ad0157 100644
--- a/packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx
+++ b/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>;
 }
 
diff --git a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx b/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx
index 0e724659752c4..e560306b50331 100644
--- a/packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx
+++ b/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
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index 17e2dd2a9d3f4..b460bd5345530 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -19,6 +19,9 @@ export interface DatePickerToolbarProps<TDate extends PickerValidDate>
     ExportedDatePickerToolbarProps {}
 
 export interface ExportedDatePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<DatePickerToolbarClasses>;
 }
 
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
index 27b0b042aae56..082ee0d1ce678 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
@@ -120,6 +120,9 @@ export interface PickersLayoutProps<
    * Ref to pass to the root element
    */
   ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<PickersLayoutClasses>;
   /**
    * Overridable component slots.
diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
index 9dde975b582e0..aaa5552a8c659 100644
--- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx
@@ -15,6 +15,9 @@ export interface ExportedPickersArrowSwitcherProps {
    * @default {}
    */
   slotProps?: PickersArrowSwitcherSlotProps;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<PickersArrowSwitcherClasses>;
   /**
    * Format used to display the date.
diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index a1884b16c1aa9..3b05f4c48f36b 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -79,6 +79,9 @@ export interface PickerPopperProps extends UsePickerValueActions {
   onBlur?: () => void;
   slots?: PickersPopperSlots;
   slotProps?: PickersPopperSlotProps;
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes?: Partial<PickersPopperClasses>;
   shouldRestoreFocus?: () => boolean;
   reduceAnimations?: boolean;

From fdb599f97d4147fb4536cadb99e5c788a6f8b16e Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 14:34:21 +0200
Subject: [PATCH 07/10] proptypes

---
 .../src/DateRangeCalendar/DateRangeCalendar.tsx              | 3 +++
 .../src/DateRangePicker/DateRangePickerToolbar.tsx           | 3 +++
 .../src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx      | 5 +++++
 .../src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx   | 3 +++
 packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx    | 3 +++
 packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx | 3 +++
 .../x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx | 5 +++++
 packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx  | 3 +++
 packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx | 3 +++
 9 files changed, 31 insertions(+)

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
index ec2f22372bd90..b3fcc8f2412f6 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
+++ b/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,
   /**
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
index 12f242315c672..821a073c858ee 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -131,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,
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
index 5ded79c38b8c2..37c5d8302e444 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -234,6 +234,11 @@ DateTimeRangePickerTabs.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
   /**
    * Time tab icon.
    * @default TimeIcon
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index b2a0fcd4562ea..039897de20e9f 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -198,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,
diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
index 65371086ad17a..aaecd1e226092 100644
--- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
+++ b/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,
   /**
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index b460bd5345530..aa9d4ca360992 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -121,6 +121,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: PropTypes.string,
   disabled: PropTypes.bool,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
index 05421467bdbbf..f772a33e46459 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -165,6 +165,11 @@ DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
   /**
    * Time tab icon.
    * @default Time
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index c76b350f092fb..8ee70601f1c82 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -126,6 +126,9 @@ PickersLayout.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
index a56aea503a9fc..1fd17f9d9465d 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -275,6 +275,9 @@ TimePickerToolbar.propTypes = {
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,

From da694e59fd74b20371a8d59b4f3c5f1e0b264a1b Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 14:48:07 +0200
Subject: [PATCH 08/10] docs:api

---
 docs/pages/x/api/date-pickers/date-calendar.json                 | 1 +
 docs/pages/x/api/date-pickers/date-picker-toolbar.json           | 1 +
 docs/pages/x/api/date-pickers/date-range-calendar.json           | 1 +
 docs/pages/x/api/date-pickers/date-range-picker-toolbar.json     | 1 +
 .../pages/x/api/date-pickers/date-time-range-picker-toolbar.json | 1 +
 docs/pages/x/api/date-pickers/pickers-layout.json                | 1 +
 docs/pages/x/api/date-pickers/time-picker-toolbar.json           | 1 +
 .../api-docs/date-pickers/date-calendar/date-calendar.json       | 1 +
 .../date-pickers/date-picker-toolbar/date-picker-toolbar.json    | 1 +
 .../date-pickers/date-range-calendar/date-range-calendar.json    | 1 +
 .../date-range-picker-toolbar/date-range-picker-toolbar.json     | 1 +
 .../date-time-range-picker-toolbar.json                          | 1 +
 .../api-docs/date-pickers/pickers-layout/pickers-layout.json     | 1 +
 .../date-pickers/time-picker-toolbar/time-picker-toolbar.json    | 1 +
 14 files changed, 14 insertions(+)

diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json
index e7b9b342558f2..a1495a0d60b08 100644
--- a/docs/pages/x/api/date-pickers/date-calendar.json
+++ b/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()",
diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
index 8e565400a1eaa..805cf494dac8c 100644
--- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
@@ -12,6 +12,7 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json
index bc7330a92d879..9702f1dc33cac 100644
--- a/docs/pages/x/api/date-pickers/date-range-calendar.json
+++ b/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"
diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
index 8492bb0aa2513..222940469ffd0 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
index 01c430ed77594..1a3aa41262fc3 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
@@ -12,6 +12,7 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json
index 48ebd9037c622..26202116bbc48 100644
--- a/docs/pages/x/api/date-pickers/pickers-layout.json
+++ b/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'" }
     },
diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
index 423df6f45537f..29461b6ed9de0 100644
--- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
@@ -12,6 +12,7 @@
       },
       "required": true
     },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }
diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json
index 7cd6b5135e369..7c2a6f4423f09 100644
--- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json
+++ b/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": {
diff --git a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
index 68f51d15176a4..171fbed1e828a 100644
--- a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
@@ -1,6 +1,7 @@
 {
   "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",
diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json
index e766f5c5c2349..818fb79cac8f5 100644
--- a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json
+++ b/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.",
diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
index 6ce5b1f46f76a..c79698e5e62c3 100644
--- a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
@@ -1,6 +1,7 @@
 {
   "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." },
     "toolbarFormat": { "description": "Toolbar date format." },
     "toolbarPlaceholder": {
diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
index b5619c2e336c5..c78ba831f9cae 100644
--- a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
@@ -1,6 +1,7 @@
 {
   "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",
diff --git a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
index 2802347c6104c..2d5f1302402d4 100644
--- a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
+++ b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
@@ -1,6 +1,7 @@
 {
   "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." }
diff --git a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
index 15a1b594f546b..6eb6827da0d50 100644
--- a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
@@ -1,6 +1,7 @@
 {
   "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",

From 524df2b4c9ecaffae075ae74c39f98a265686b1a Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 15:04:51 +0200
Subject: [PATCH 09/10] Add missing `sx` JSDoc

---
 .../x-date-pickers/src/PickersLayout/PickersLayout.types.ts   | 3 +++
 packages/x-date-pickers/src/internals/models/props/tabs.ts    | 3 +++
 packages/x-date-pickers/src/internals/models/props/toolbar.ts | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
index 082ee0d1ce678..32cb59af51f45 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
@@ -115,6 +115,9 @@ export interface PickersLayoutProps<
   value?: TValue;
   className?: string;
   children?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx?: SxProps<Theme>;
   /**
    * Ref to pass to the root element
diff --git a/packages/x-date-pickers/src/internals/models/props/tabs.ts b/packages/x-date-pickers/src/internals/models/props/tabs.ts
index 73c7cad81cc19..576939e81aa94 100644
--- a/packages/x-date-pickers/src/internals/models/props/tabs.ts
+++ b/packages/x-date-pickers/src/internals/models/props/tabs.ts
@@ -17,5 +17,8 @@ export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
 
 export interface ExportedBaseTabsProps {
   className?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx?: SxProps<Theme>;
 }
diff --git a/packages/x-date-pickers/src/internals/models/props/toolbar.ts b/packages/x-date-pickers/src/internals/models/props/toolbar.ts
index 6d9fc79b6a92b..100895592be55 100644
--- a/packages/x-date-pickers/src/internals/models/props/toolbar.ts
+++ b/packages/x-date-pickers/src/internals/models/props/toolbar.ts
@@ -40,6 +40,8 @@ export interface ExportedBaseToolbarProps {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden?: boolean;
-
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx?: SxProps<Theme>;
 }

From 2061a2b2a8f7d5989b159ef2a5fcf9cfb7c5d4db Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 16 Feb 2024 15:06:59 +0200
Subject: [PATCH 10/10] scripts

---
 docs/pages/x/api/date-pickers/date-picker-toolbar.json     | 7 +++++++
 .../x/api/date-pickers/date-range-picker-toolbar.json      | 7 +++++++
 docs/pages/x/api/date-pickers/date-time-picker-tabs.json   | 7 +++++++
 .../pages/x/api/date-pickers/date-time-picker-toolbar.json | 7 +++++++
 .../x/api/date-pickers/date-time-range-picker-tabs.json    | 7 +++++++
 .../x/api/date-pickers/date-time-range-picker-toolbar.json | 7 +++++++
 docs/pages/x/api/date-pickers/pickers-layout.json          | 7 +++++++
 docs/pages/x/api/date-pickers/time-picker-toolbar.json     | 7 +++++++
 .../date-picker-toolbar/date-picker-toolbar.json           | 3 +++
 .../date-range-picker-toolbar.json                         | 3 +++
 .../date-time-picker-tabs/date-time-picker-tabs.json       | 3 +++
 .../date-time-picker-toolbar/date-time-picker-toolbar.json | 3 +++
 .../date-time-range-picker-tabs.json                       | 3 +++
 .../date-time-range-picker-toolbar.json                    | 3 +++
 .../date-pickers/pickers-layout/pickers-layout.json        | 5 ++++-
 .../time-picker-toolbar/time-picker-toolbar.json           | 3 +++
 .../src/DateRangePicker/DateRangePickerToolbar.tsx         | 3 +++
 .../src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx    | 3 +++
 .../src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx | 3 +++
 .../x-date-pickers/src/DatePicker/DatePickerToolbar.tsx    | 3 +++
 .../src/DateTimePicker/DateTimePickerTabs.tsx              | 3 +++
 .../src/DateTimePicker/DateTimePickerToolbar.tsx           | 3 +++
 .../x-date-pickers/src/PickersLayout/PickersLayout.tsx     | 3 +++
 .../x-date-pickers/src/TimePicker/TimePickerToolbar.tsx    | 3 +++
 24 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
index 805cf494dac8c..0747cc022c787 100644
--- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
@@ -14,6 +14,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": "\"––\"" }
   },
diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
index 222940469ffd0..b95d8610ead83 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
@@ -2,6 +2,13 @@
   "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": "\"––\"" }
   },
diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json
index 447813119c4e1..1b401f930604a 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json
+++ b/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",
diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json
index 7b8e9b350f172..e4a1448a9a1ef 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json
+++ b/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" } },
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json
index 8002de5133e27..ddc60b796d52c 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json
+++ b/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",
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
index 1a3aa41262fc3..bc3a47360a46e 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
@@ -14,6 +14,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": "\"––\"" }
   },
diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json
index 26202116bbc48..f340a4c17beb6 100644
--- a/docs/pages/x/api/date-pickers/pickers-layout.json
+++ b/docs/pages/x/api/date-pickers/pickers-layout.json
@@ -9,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",
diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
index 29461b6ed9de0..c9b06eae9fa11 100644
--- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json
+++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
@@ -14,6 +14,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": "\"––\"" }
   },
diff --git a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
index 171fbed1e828a..d3005707118ce 100644
--- a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-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."
diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
index c79698e5e62c3..c812f7977b2cd 100644
--- a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
@@ -3,6 +3,9 @@
   "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."
diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json
index dd1a91b2539c5..57e9f88d0d2c4 100644
--- a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json
+++ b/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." }
   },
diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json
index 07cd4628d852f..16ff4256c7a8f 100644
--- a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json
+++ b/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."
diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json
index b53e1ece571df..40d062cc2ac95 100644
--- a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json
+++ b/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." }
   },
diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
index c78ba831f9cae..63ced2f4fcd6a 100644
--- a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-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."
diff --git a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
index 2d5f1302402d4..1fc772c256d8b 100644
--- a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
+++ b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
@@ -4,7 +4,10 @@
     "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": {
diff --git a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
index 6eb6827da0d50..96c506ed6fd9d 100644
--- a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
+++ b/docs/translations/api-docs/date-pickers/time-picker-toolbar/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."
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
index 821a073c858ee..48f494b73dd9a 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -145,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,
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
index 37c5d8302e444..94073f8d1c414 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -234,6 +234,9 @@ 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,
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index 039897de20e9f..ab3a4a32fd666 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -220,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,
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index aa9d4ca360992..5478108b0d720 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -141,6 +141,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,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
index f772a33e46459..43362d38829ca 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -165,6 +165,9 @@ DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.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,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 0296e6969ed8a..8f48f52b6b5e0 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -408,6 +408,9 @@ DateTimePickerToolbar.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,
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index 8ee70601f1c82..ac97bf691f5d1 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -159,6 +159,9 @@ PickersLayout.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * 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,
diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
index 1fd17f9d9465d..65d0e53ba7706 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -295,6 +295,9 @@ TimePickerToolbar.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,