Merge pull request #10164 from marmelab/css-baseline

Add global Reset CSS
marmelab · Aug 29, 2024 · 1821c73 · 1821c73
2 parents 7ea9695 + e802c1b
commit 1821c73
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 61 deletions.
diff --git a/docs/Remix.md b/docs/Remix.md
@@ -66,8 +66,8 @@ export default defineConfig({
 {
   // ...
   "resolutions": {
-    "react-router": "6.24.1",
-    "react-router-dom": "6.24.1"
+    "react-router": "6.26.1",
+    "react-router-dom": "6.26.1"
   }
 }
 ```
@@ -88,11 +88,6 @@ To do so, add a [splat route](https://remix.run/docs/en/main/file-conventions/ro
 // in app/routes/admin.$.tsx
 import { Admin, Resource, ListGuesser } from "react-admin";
 import jsonServerProvider from "ra-data-json-server";
-import styles from "~/styles/admin.css";
-
-export function links() {
-  return [{ rel: "stylesheet", href: styles }];
-}
 
 const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
 
@@ -106,12 +101,6 @@ export default function App() {
 }
 ```
 
-The stylesheet link is necessary to reset the default styles of the admin app. Create it in `app/styles/admin.css`:
-
-```css
-body { margin: 0; }
-```
-
 **Tip** Don't forget to set the `<Admin basename>` prop, so that react-admin generates links relative to the "/admin" subpath:
 
 You can now start the app in `development` mode with `npm run dev`. The admin should render at `http://localhost:3000/admin`, and you can use the Remix routing system to add more pages.

diff --git a/docs/Vite.md b/docs/Vite.md
@@ -12,13 +12,13 @@ title: "Installing React-admin With Vite"
 Create a new Vite project with React template using the command line:
 
 ```sh
-yarn create vite my-admin --template react
+yarn create vite my-admin --template react-ts
 ```
 
-We recommend using the TypeScript template:
+**Tip**: If you prefer using JavaScript instead of TypeScript, change the template to `react`.
 
 ```sh
-yarn create vite my-admin --template react-ts
+yarn create vite my-admin --template react
 ```
 
 ## Setting Up React-Admin
@@ -61,16 +61,22 @@ const App = () => <MyAdmin />;
 export default App;
 ```
 
-Then, change the `index.css` file to look like this:
+Remove the `index.css` import in the `main.tsx` file:
 
-```css
-/* in src/index.css */
-body {
-    margin: 0;
-}
+```diff
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+-import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
 ```
 
-Next, add the `Roboto` font to your `index.html` file:
+Finally, add the `Roboto` font to your `index.html` file:
 
 ```diff
 // in ./index.html

diff --git a/examples/crm/index.html b/examples/crm/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -11,12 +11,6 @@
         <link rel="shortcut icon" href="./favicon.ico" />
         <title>Atomic CRM</title>
         <style>
-            body {
-                margin: 0;
-                padding: 0;
-                font-family: sans-serif;
-            }
-
             .loader-container {
                 display: flex;
                 align-items: center;

diff --git a/examples/demo/index.html b/examples/demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -11,12 +11,6 @@
         <link rel="shortcut icon" href="./favicon.ico" />
         <title>Posters Galore Administration</title>
         <style>
-            body {
-                margin: 0;
-                padding: 0;
-                font-family: sans-serif;
-            }
-
             .loader-container {
                 display: flex;
                 align-items: center;
@@ -111,10 +105,22 @@
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
             rel="stylesheet"
         />
-        <link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;900&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap" rel="stylesheet">
+        <link
+            href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;900&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap"
+            rel="stylesheet"
+        />
     </head>
 
     <body>

diff --git a/examples/no-code/index.html b/examples/no-code/index.html
@@ -27,4 +27,4 @@
     <script>window.global = window</script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -1,12 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>React Admin</title>
         <style>
             body {
-                margin: 0;
                 background-color: #fafafb;
             }
 
@@ -15,7 +14,7 @@
                     background-color: #313131;
                 }
             }
-
+            
             .initialLoader {
                 width: 100px;
                 height: 102px;

diff --git a/examples/tutorial/src/index.css b/examples/tutorial/src/index.css
diff --git a/examples/tutorial/src/main.tsx b/examples/tutorial/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>

diff --git a/packages/create-react-admin/templates/common/index.html b/packages/create-react-admin/templates/common/index.html
@@ -11,12 +11,6 @@
         <link rel="shortcut icon" href="./favicon.ico" />
         <title>{{name}}</title>
         <style>
-            body {
-                margin: 0;
-                padding: 0;
-                font-family: sans-serif;
-            }
-
             .loader-container {
                 display: flex;
                 align-items: center;

diff --git a/packages/ra-ui-materialui/src/AdminUI.tsx b/packages/ra-ui-materialui/src/AdminUI.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createElement, ComponentType } from 'react';
 import { CoreAdminUI, CoreAdminUIProps } from 'ra-core';
-import { ScopedCssBaseline } from '@mui/material';
+import { CssBaseline } from '@mui/material';
 
 import {
     Layout as DefaultLayout,
@@ -22,7 +22,7 @@ export const AdminUI = ({
     error = Error,
     ...props
 }: AdminUIProps) => (
-    <ScopedCssBaseline enableColorScheme>
+    <CssBaseline enableColorScheme>
         <CoreAdminUI
             layout={layout}
             catchAll={catchAll}
@@ -33,7 +33,7 @@ export const AdminUI = ({
             {...props}
         />
         {createElement(notification)}
-    </ScopedCssBaseline>
+    </CssBaseline>
 );
 
 export interface AdminUIProps extends CoreAdminUIProps {

diff --git a/packages/ra-ui-materialui/src/button/ToggleThemeButton.spec.tsx b/packages/ra-ui-materialui/src/button/ToggleThemeButton.spec.tsx
@@ -11,9 +11,7 @@ describe('ToggleThemeButton', () => {
     });
     it('should allow to change the theme between light and dark', async () => {
         const { container } = render(<Basic />);
-        const root = container.querySelector<HTMLDivElement>(
-            '.MuiScopedCssBaseline-root'
-        );
+        const root = container.parentElement!.parentElement;
         if (!root) {
             throw new Error('No root element found');
         }
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,4 @@ @@
         <script>window.global = window</script>
         <script type="module" src="/src/main.tsx"></script>
       </body>
-    </html>
+    </html>