Merge pull request #6918 from AntoineCrb/update-docs

update docs & example : createMuiTheme is out of date
marmelab · Dec 2, 2021 · d5bfda4 · d5bfda4
2 parents 5395b13 + 13909d9
commit d5bfda4
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 21 deletions.
diff --git 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
@@ -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 (
-        <ThemeProvider theme={createMuiTheme(defaultTheme)}>
+        <ThemeProvider theme={createTheme(defaultTheme)}>
             <form onSubmit={submit}>
                 <input
                     name="email"
@@ -942,7 +942,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('');
@@ -957,7 +957,7 @@ const MyLoginPage = ({ theme }) => {
     };
 
     return (
-        <ThemeProvider theme={createMuiTheme(defaultTheme)}>
+        <ThemeProvider theme={createTheme(defaultTheme)}>
             <form onSubmit={submit}>
                 <input
                     name="email"

diff --git a/docs/CustomApp.md b/docs/CustomApp.md
@@ -162,7 +162,7 @@ import restProvider from 'ra-data-simple-rest';
 import defaultMessages from 'ra-language-english';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 +import { ThemeProvider } from '@material-ui/styles';
-+import { createMuiTheme } from "@material-ui/core/styles";
++import { createTheme } from "@material-ui/core/styles";
 +import AppBar from '@material-ui/core/AppBar';
 +import Toolbar from '@material-ui/core/Toolbar';
 +import Typography from '@material-ui/core/Typography';
@@ -186,7 +186,7 @@ const i18nProvider = polyglotI18nProvider(locale => {
     return defaultMessages;
 });
 const history = createHashHistory();
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const App = () => (
     <Provider

diff --git a/docs/Theming.md b/docs/Theming.md
@@ -251,12 +251,12 @@ export const PostList = (props) => {
 
 ## 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 `<Admin>` 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 `<Admin>` 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

diff --git 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 = () => (
     <Admin

diff --git a/examples/crm/src/Layout.tsx b/examples/crm/src/Layout.tsx
@@ -1,7 +1,7 @@
 import React, { Component, ErrorInfo, HtmlHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import { CssBaseline, Container } from '@material-ui/core';
 import { CoreLayoutProps } from 'react-admin';
@@ -43,7 +43,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
         const { hasError, errorMessage, errorInfo } = this.state;
         return (
             // @ts-ignore
-            <ThemeProvider theme={createMuiTheme(theme)}>
+            <ThemeProvider theme={createTheme(theme)}>
                 <CssBaseline />
                 <Header />
                 <Container>

diff --git 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) => (
-    <ThemeProvider theme={createMuiTheme(lightTheme)}>
+    <ThemeProvider theme={createTheme(lightTheme)}>
         <Login {...props} />
     </ThemeProvider>
 );

diff --git 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(
     <React.StrictMode>