From 330fe1214e76d9af408a1f4a5c27eb5197293a24 Mon Sep 17 00:00:00 2001 From: Antoine Date: Mon, 29 Nov 2021 18:35:38 +0100 Subject: [PATCH 1/2] update docs mui themes --- docs/Admin.md | 4 ++-- docs/Authentication.md | 8 ++++---- docs/CustomApp.md | 4 ++-- docs/Theming.md | 10 +++++----- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 30fa39ca1bd..2c3bf373b62 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -277,9 +277,9 @@ See the [Theming documentation](./Theming.md#using-a-custom-menu) for more detai Material UI supports [theming](https://v4.mui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop: ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { type: 'dark', // Switching the dark mode on is a single property value change. }, diff --git a/docs/Authentication.md b/docs/Authentication.md index 38ad51447e1..0b9db1c1cf6 100644 --- a/docs/Authentication.md +++ b/docs/Authentication.md @@ -626,7 +626,7 @@ import * as React from 'react'; import { useState } from 'react'; import { useLogin, useNotify, Notification, defaultTheme } from 'react-admin'; import { ThemeProvider } from '@material-ui/styles'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; const MyLoginPage = ({ theme }) => { const [email, setEmail] = useState(''); @@ -642,7 +642,7 @@ const MyLoginPage = ({ theme }) => { }; return ( - +
{ const [email, setEmail] = useState(''); @@ -957,7 +957,7 @@ const MyLoginPage = ({ theme }) => { }; return ( - + { return defaultMessages; }); const history = createHashHistory(); -const theme = createMuiTheme(); +const theme = createTheme(); const App = () => ( { ## Using a Predefined Theme -Material UI also supports [complete theming](https://v4.mui.com/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `` component, in the `theme` prop (along with `createMuiTheme()`). +Material UI also supports [complete theming](https://v4.mui.com/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `` component, in the `theme` prop (along with `createTheme()`). ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ palette: { type: 'dark', // Switching the dark mode on is a single property value change. }, @@ -446,9 +446,9 @@ You can specify the `Sidebar` width by setting the `width` and `closedWidth` pro ```jsx import { defaultTheme } from "react-admin"; -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ ...defaultTheme, sidebar: { width: 300, // The default value is 240 From 13909d9dcba37d00d72436d3cd09aee67201d1c2 Mon Sep 17 00:00:00 2001 From: Antoine Date: Mon, 29 Nov 2021 18:40:01 +0100 Subject: [PATCH 2/2] update examples mui themes --- examples/crm/src/App.tsx | 4 ++-- examples/crm/src/Layout.tsx | 4 ++-- examples/demo/src/layout/Login.tsx | 4 ++-- examples/no-code/src/main.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/crm/src/App.tsx b/examples/crm/src/App.tsx index 89a5a1ca989..8f58b4c8389 100644 --- a/examples/crm/src/App.tsx +++ b/examples/crm/src/App.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Admin, Resource, ListGuesser, defaultTheme } from 'react-admin'; import { unstable_createMuiStrictModeTheme, - createMuiTheme, + createTheme, } from '@material-ui/core/styles'; import { dataProvider } from './dataProvider'; @@ -17,7 +17,7 @@ import { Dashboard } from './dashboard/Dashboard'; const theme = process.env.NODE_ENV !== 'production' ? unstable_createMuiStrictModeTheme(defaultTheme) - : createMuiTheme(defaultTheme); + : createTheme(defaultTheme); const App = () => ( { const { hasError, errorMessage, errorInfo } = this.state; return ( // @ts-ignore - +
diff --git a/examples/demo/src/layout/Login.tsx b/examples/demo/src/layout/Login.tsx index ac64d16c86c..20c4100d145 100644 --- a/examples/demo/src/layout/Login.tsx +++ b/examples/demo/src/layout/Login.tsx @@ -12,7 +12,7 @@ import { CircularProgress, TextField, } from '@material-ui/core'; -import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; +import { createTheme, makeStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import LockIcon from '@material-ui/icons/Lock'; import { Notification, useTranslate, useLogin, useNotify } from 'react-admin'; @@ -199,7 +199,7 @@ Login.propTypes = { // Because otherwise the useStyles() hook used in Login won't get // the right theme const LoginWithTheme = (props: any) => ( - + ); diff --git a/examples/no-code/src/main.tsx b/examples/no-code/src/main.tsx index 77c0ef213ef..984421fb853 100644 --- a/examples/no-code/src/main.tsx +++ b/examples/no-code/src/main.tsx @@ -4,14 +4,14 @@ import { Root } from 'ra-no-code'; import { defaultTheme } from 'react-admin'; import { unstable_createMuiStrictModeTheme, - createMuiTheme, + createTheme, } from '@material-ui/core/styles'; // FIXME MUI bug https://github.com/mui-org/material-ui/issues/13394 const theme = process.env.NODE_ENV !== 'production' ? unstable_createMuiStrictModeTheme(defaultTheme) - : createMuiTheme(defaultTheme); + : createTheme(defaultTheme); ReactDOM.render(