diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
index 6de4781ee8a0..538a8fa83ad0 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
+import clsx from 'clsx';
import PropTypes from 'prop-types';
import Tab from '@mui/material/Tab';
import Tabs, { tabsClasses } from '@mui/material/Tabs';
import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
import { TimeIcon, DateRangeIcon } from '../icons';
import { DateOrTimeViewWithMeridiem } from '../internals/models';
import { useLocaleText } from '../internals/hooks/useUtils';
@@ -101,6 +102,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
timeIcon = ,
view,
hidden = typeof window === 'undefined' || window.innerHeight < 667,
+ className,
} = props;
const localeText = useLocaleText();
@@ -120,7 +122,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
variant="fullWidth"
value={viewToTab(view)}
onChange={handleChange}
- className={classes.root}
+ className={clsx(className, classes.root)}
>
(
'MuiPickersLayout',
- ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts'],
+ ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts'],
);
diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
index 386130ec0e68..735efc971955 100644
--- a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
@@ -122,7 +122,9 @@ const usePickerLayout = : null;
+ view && Tabs ? (
+
+ ) : null;
// Shortcuts
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 688dd69d4def..3ff1edc627af 100644
--- a/packages/x-date-pickers/src/internals/models/props/tabs.ts
+++ b/packages/x-date-pickers/src/internals/models/props/tabs.ts
@@ -11,6 +11,7 @@ export interface BaseTabsProps {
* @param {TView} view The view to open
*/
onViewChange: (view: TView) => void;
+ className?: string;
}
export interface ExportedBaseTabsProps {}