diff --git a/examples/simple/src/index.tsx b/examples/simple/src/index.tsx index 92f1875dedb..9ac5e0b5813 100644 --- a/examples/simple/src/index.tsx +++ b/examples/simple/src/index.tsx @@ -16,31 +16,33 @@ import users from './users'; import tags from './tags'; render( - } - />, - } - />, - ]} - > - {permissions => [ - , - , - permissions ? : null, - , - ]} - , + + } + />, + } + />, + ]} + > + {permissions => [ + , + , + permissions ? : null, + , + ]} + + , document.getElementById('root') ); diff --git a/examples/simple/vite.config.js b/examples/simple/vite.config.js index 778e142098d..9cc1cb9cd31 100644 --- a/examples/simple/vite.config.js +++ b/examples/simple/vite.config.js @@ -35,4 +35,5 @@ export default { server: { port: 8080, }, + define: { 'process.env': {} }, }; diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx index ddf4a94ad3d..07d009f26d8 100644 --- a/packages/ra-ui-materialui/src/auth/Login.tsx +++ b/packages/ra-ui-materialui/src/auth/Login.tsx @@ -10,7 +10,7 @@ import React, { import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Card, Avatar, Theme } from '@material-ui/core'; -import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import LockIcon from '@material-ui/icons/Lock'; import { StaticContext } from 'react-router'; @@ -18,6 +18,7 @@ import { useHistory } from 'react-router-dom'; import { useCheckAuth, TitleComponent } from 'ra-core'; import defaultTheme from '../defaultTheme'; +import { createMuiTheme } from '../layout'; import DefaultNotification from '../layout/Notification'; import DefaultLoginForm from './LoginForm'; diff --git a/packages/ra-ui-materialui/src/layout/Layout.tsx b/packages/ra-ui-materialui/src/layout/Layout.tsx index 3cfcf35acb7..71109979ca8 100644 --- a/packages/ra-ui-materialui/src/layout/Layout.tsx +++ b/packages/ra-ui-materialui/src/layout/Layout.tsx @@ -13,11 +13,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classnames from 'classnames'; import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { - createMuiTheme, - withStyles, - createStyles, -} from '@material-ui/core/styles'; +import { withStyles, createStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import { ThemeOptions } from '@material-ui/core'; import { ComponentPropType, CoreLayoutProps } from 'ra-core'; @@ -30,6 +26,7 @@ import DefaultNotification from './Notification'; import DefaultError from './Error'; import defaultTheme from '../defaultTheme'; import SkipNavigationButton from '../button/SkipNavigationButton'; +import { createMuiTheme } from './createMuiTheme'; const styles = theme => createStyles({ diff --git a/packages/ra-ui-materialui/src/layout/LoadingPage.tsx b/packages/ra-ui-materialui/src/layout/LoadingPage.tsx index ffb249c441d..2beea21316d 100644 --- a/packages/ra-ui-materialui/src/layout/LoadingPage.tsx +++ b/packages/ra-ui-materialui/src/layout/LoadingPage.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { ThemeProvider } from '@material-ui/styles'; -import { createMuiTheme } from '@material-ui/core/styles'; + +import { createMuiTheme } from './createMuiTheme'; import Loading from './Loading'; const LoadingPage = ({ theme, ...props }) => ( diff --git a/packages/ra-ui-materialui/src/layout/createMuiTheme.ts b/packages/ra-ui-materialui/src/layout/createMuiTheme.ts new file mode 100644 index 00000000000..c85f1a61638 --- /dev/null +++ b/packages/ra-ui-materialui/src/layout/createMuiTheme.ts @@ -0,0 +1,14 @@ +import { + createMuiTheme as createLegacyModeTheme, + unstable_createMuiStrictModeTheme as createStrictModeTheme, +} from '@material-ui/core/styles'; + +/** + * Alternative to MUI's createMuiTheme that doesn't log findDomNode warnings in StrictMode + * + * @see https://github.com/mui-org/material-ui/issues/13394 + */ +export const createMuiTheme = + process.env.NODE_END === 'production' + ? createLegacyModeTheme + : createStrictModeTheme; diff --git a/packages/ra-ui-materialui/src/layout/index.ts b/packages/ra-ui-materialui/src/layout/index.ts index 1f643a911ce..ac59fab3933 100644 --- a/packages/ra-ui-materialui/src/layout/index.ts +++ b/packages/ra-ui-materialui/src/layout/index.ts @@ -21,6 +21,7 @@ import Title, { TitleProps, TitlePropType } from './Title'; import TitleForRecord from './TitleForRecord'; import TopToolbar from './TopToolbar'; import UserMenu, { UserMenuProps } from './UserMenu'; +export * from './createMuiTheme'; export { AppBar,