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.

Component demos

Import

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

Props

components

Overridable components.

Type:object

Default:{}

componentsProps

The props used for each component slot.

Type:object

Default:{}

orientation

Force rendering in particular orientation.

Type:'landscape'
| 'portrait'

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

Type:object

Default:{}

The component cannot hold a ref.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiPickersLayout-root

Styles applied to the root element.

Rule name:root

.MuiPickersLayout-landscape

Styles applied to the root element in landscape orientation.

Rule name:landscape

.MuiPickersLayout-contentWrapper

Styles applied to the contentWrapper element (which contains the tabs and the view itself).

Rule name:contentWrapper

.MuiPickersLayout-toolbar

Styles applied to the toolbar.

Rule name:toolbar

.MuiPickersLayout-actionBar

Styles applied to the action bar.

Rule name:actionBar

.MuiPickersLayout-tabs

Styles applied to the tabs.

Rule name:tabs

.MuiPickersLayout-shortcuts

Styles applied to the shortcuts container.

Rule name:shortcuts


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

Slots

actionBar

Custom component for the action bar, it is placed below the picker views.

Default: PickersActionBar

layout

Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.

shortcuts

Custom component for the shortcuts.

Default: PickersShortcuts

tabs

Tabs enabling toggling between views.

toolbar

Custom component for the toolbar. It is placed above the picker views.