Skip to content

PickersLayout API

API reference docs for the React PickersLayout component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { PickersLayout } from '@mui/x-date-pickers-pro/PickersLayout';
// or
import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
// or
import { PickersLayout } from '@mui/x-date-pickers-pro';
// or
import { PickersLayout } from '@mui/x-date-pickers';
You can learn about the difference by reading this guide on minimizing bundle size.

Component name

The name MuiPickersLayout can be used when providing default props or style overrides in the theme.

Props

NameTypeDefaultDescription
componentsobject{}
Overridable components.
componentsPropsobject{}
The props used for each component slot.
orientation'landscape'
| 'portrait'
Force rendering in particular orientation.
slotPropsobject{}
The props used for each component slot.
slotsobject{}
Overridable component slots.

Slots

NameTypeDefaultDescription
ActionBarelementTypePickersActionBar
Custom component for the action bar, it is placed below the picker views.
LayoutelementType
Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.
ShortcutselementTypePickersShortcuts
Custom component for the shortcuts.
TabselementType
Tabs enabling toggling between views.
ToolbarelementType
Custom component for the toolbar. It is placed above the picker views.
The component cannot hold a ref.

CSS

Rule nameGlobal classDescription
root.MuiPickersLayout-rootStyles applied to the root element.
landscape.MuiPickersLayout-landscapeStyles applied to the root element in landscape orientation.
contentWrapper.MuiPickersLayout-contentWrapperStyles applied to the contentWrapper element (which contains the tabs and the view itself).
toolbar.MuiPickersLayout-toolbarStyles applied to the toolbar.
actionBar.MuiPickersLayout-actionBarStyles applied to the action bar.
tabs.MuiPickersLayout-tabsStyles applied to the tabs.
shortcuts.MuiPickersLayout-shortcutsStyles applied to the shortcuts container.

You can override the style of the component using one of these customization options: