Merge pull request #8368 from marmelab/fix-css-baseline

Fix Inputs layout is broken when rendering the Login page first
marmelab · Nov 7, 2022 · 08bf9a7 · 08bf9a7
2 parents 214a941 + c7c9b6c
commit 08bf9a7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 38 deletions.
diff --git a/packages/ra-ui-materialui/src/AdminUI.tsx b/packages/ra-ui-materialui/src/AdminUI.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { createElement, ComponentType } from 'react';
 import { CoreAdminUI, CoreAdminUIProps } from 'ra-core';
+import { ScopedCssBaseline } from '@mui/material';
+
 import {
     Layout as DefaultLayout,
     LoadingPage,
@@ -10,10 +12,10 @@ import {
 import { Login } from './auth';
 
 export const AdminUI = ({ notification, ...props }: AdminUIProps) => (
-    <>
+    <ScopedCssBaseline enableColorScheme>
         <CoreAdminUI {...props} />
         {createElement(notification)}
-    </>
+    </ScopedCssBaseline>
 );
 
 export interface AdminUIProps extends CoreAdminUIProps {

diff --git a/packages/ra-ui-materialui/src/layout/Layout.tsx b/packages/ra-ui-materialui/src/layout/Layout.tsx
@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import clsx from 'clsx';
-import { ScopedCssBaseline } from '@mui/material';
 import { styled, SxProps } from '@mui/material/styles';
 import { CoreLayoutProps } from 'ra-core';
 
@@ -40,42 +39,34 @@ export const Layout = (props: LayoutProps) => {
     };
 
     return (
-        <ScopedCssBaseline enableColorScheme>
-            <StyledLayout className={clsx('layout', className)} {...rest}>
-                <SkipNavigationButton />
-                <div className={LayoutClasses.appFrame}>
-                    <AppBar open={open} title={title} />
-                    <main className={LayoutClasses.contentWithSidebar}>
-                        <Sidebar>
-                            <Menu hasDashboard={!!dashboard} />
-                        </Sidebar>
-                        <div
-                            id="main-content"
-                            className={LayoutClasses.content}
+        <StyledLayout className={clsx('layout', className)} {...rest}>
+            <SkipNavigationButton />
+            <div className={LayoutClasses.appFrame}>
+                <AppBar open={open} title={title} />
+                <main className={LayoutClasses.contentWithSidebar}>
+                    <Sidebar>
+                        <Menu hasDashboard={!!dashboard} />
+                    </Sidebar>
+                    <div id="main-content" className={LayoutClasses.content}>
+                        <ErrorBoundary
+                            onError={handleError}
+                            fallbackRender={({ error, resetErrorBoundary }) => (
+                                <Error
+                                    error={error}
+                                    errorComponent={errorComponent}
+                                    errorInfo={errorInfo}
+                                    resetErrorBoundary={resetErrorBoundary}
+                                    title={title}
+                                />
+                            )}
                         >
-                            <ErrorBoundary
-                                onError={handleError}
-                                fallbackRender={({
-                                    error,
-                                    resetErrorBoundary,
-                                }) => (
-                                    <Error
-                                        error={error}
-                                        errorComponent={errorComponent}
-                                        errorInfo={errorInfo}
-                                        resetErrorBoundary={resetErrorBoundary}
-                                        title={title}
-                                    />
-                                )}
-                            >
-                                {children}
-                            </ErrorBoundary>
-                        </div>
-                    </main>
-                    <Inspector />
-                </div>
-            </StyledLayout>
-        </ScopedCssBaseline>
+                            {children}
+                        </ErrorBoundary>
+                    </div>
+                </main>
+                <Inspector />
+            </div>
+        </StyledLayout>
     );
 };