diff --git a/packages/ra-ui-materialui/src/layout/Layout.js b/packages/ra-ui-materialui/src/layout/Layout.js index 5b6a42962be..6522ce0e5cf 100644 --- a/packages/ra-ui-materialui/src/layout/Layout.js +++ b/packages/ra-ui-materialui/src/layout/Layout.js @@ -26,47 +26,50 @@ import defaultTheme from '../defaultTheme'; import { ComponentPropType } from 'ra-core'; const styles = theme => - createStyles({ - root: { - display: 'flex', - flexDirection: 'column', - zIndex: 1, - minHeight: '100vh', - backgroundColor: theme.palette.background.default, - position: 'relative', - minWidth: 'fit-content', - width: '100%', - }, - appFrame: { - display: 'flex', - flexDirection: 'column', - [theme.breakpoints.up('xs')]: { - marginTop: theme.spacing(6), + createStyles( + { + root: { + display: 'flex', + flexDirection: 'column', + zIndex: 1, + minHeight: '100vh', + backgroundColor: theme.palette.background.default, + position: 'relative', + minWidth: 'fit-content', + width: '100%', }, - [theme.breakpoints.down('xs')]: { - marginTop: theme.spacing(7), + appFrame: { + display: 'flex', + flexDirection: 'column', + [theme.breakpoints.up('xs')]: { + marginTop: theme.spacing(6), + }, + [theme.breakpoints.down('xs')]: { + marginTop: theme.spacing(7), + }, }, - }, - contentWithSidebar: { - display: 'flex', - flexGrow: 1, - }, - content: { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - flexBasis: 0, - padding: theme.spacing(3), - paddingTop: theme.spacing(1), - paddingLeft: 0, - [theme.breakpoints.up('xs')]: { - paddingLeft: 5, + contentWithSidebar: { + display: 'flex', + flexGrow: 1, }, - [theme.breakpoints.down('sm')]: { - padding: 0, + content: { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + flexBasis: 0, + padding: theme.spacing(3), + paddingTop: theme.spacing(1), + paddingLeft: 0, + [theme.breakpoints.up('xs')]: { + paddingLeft: 5, + }, + [theme.breakpoints.down('sm')]: { + padding: 0, + }, }, }, - }); + { name: 'RaLayout' } + ); const sanitizeRestProps = ({ staticContext,