From 4c2e55577be68da31079478106e52ec9b9ba0211 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 23 Oct 2019 16:32:29 +0200
Subject: [PATCH] Fix theme can't be changed dynamically

Closes #3863
---
 .../ra-ui-materialui/src/layout/Layout.js     | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/ra-ui-materialui/src/layout/Layout.js b/packages/ra-ui-materialui/src/layout/Layout.js
index 0afeb1943e5..5b6a42962be 100644
--- a/packages/ra-ui-materialui/src/layout/Layout.js
+++ b/packages/ra-ui-materialui/src/layout/Layout.js
@@ -1,4 +1,10 @@
-import React, { Component, createElement, useEffect, useRef } from 'react';
+import React, {
+    Component,
+    createElement,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
@@ -179,16 +185,18 @@ const EnhancedLayout = compose(
 )(Layout);
 
 const LayoutWithTheme = ({ theme: themeOverride, ...props }) => {
-    const theme = useRef(createMuiTheme(themeOverride));
+    const themeProp = useRef(themeOverride);
+    const [theme, setTheme] = useState(createMuiTheme(themeOverride));
 
     useEffect(() => {
-        if (theme.current !== themeOverride) {
-            theme.current = createMuiTheme(themeOverride);
+        if (themeProp.current !== themeOverride) {
+            themeProp.current = themeOverride;
+            setTheme(createMuiTheme(themeOverride));
         }
-    }, [themeOverride]);
+    }, [themeOverride, themeProp, theme, setTheme]);
 
     return (
-        <ThemeProvider theme={theme.current}>
+        <ThemeProvider theme={theme}>
             <EnhancedLayout {...props} />
         </ThemeProvider>
     );