Merge pull request #8216 from marmelab/cssbaseline

Add CSSBaseline to the default layout for better UI

Author: slax57

examples/simple/src/Layout.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { memo } from 'react';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { AppBar, Layout, InspectorButton } from 'react-admin';
-import { CssBaseline, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 const MyAppBar = memo(props => (
     <AppBar {...props}>
@@ -13,7 +13,6 @@ const MyAppBar = memo(props => (
 
 export default props => (
     <>
-        <CssBaseline />
         <Layout {...props} appBar={MyAppBar} />
         <ReactQueryDevtools
             initialIsOpen={false}

packages/ra-ui-materialui/src/layout/Layout.tsx

@@ -7,6 +7,7 @@ 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';
 
@@ -39,34 +40,42 @@ export const Layout = (props: LayoutProps) => {
     };
 
     return (
-        <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}
-                                />
-                            )}
+        <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}
                         >
-                            {children}
-                        </ErrorBoundary>
-                    </div>
-                </main>
-                <Inspector />
-            </div>
-        </StyledLayout>
+                            <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>
     );
 };