<Admin /> "theme" prop no longer updates/refreshes if providing a different "theme" conditionally.

[newfylox]

What you were expecting: In react-admin V3, I was able to update the theme conditionally and it was updating when rerendering.

What happened instead: Now in react-admin V4 <Admin theme={theme} /> only keeps the first instance of theme, discarding other instances when rerendering.

Steps to reproduce:

• visit https://codesandbox.io/s/clever-kare-vxwcp9?file=/src/index.tsx
• first time running the primary color is green
• after the setTimeout the primary color is supposed to turn yellow but it doesn't with new React-Admin V4

Temporary solution Again, in V3 it was working directly with <Admin theme={conditionalTheme} /> without effort. Now the only solution that I have is to separate <AdminContext /> and <AdminUI />, then give a first theme instance to <AdminContext /> and then update the theme with my condition inside <AdminUI /> using useTheme. And now it's working.

const theme = (condition) => {
  return !condition
    ? {
        ...defaultTheme,
        palette: {
          primary: green,
        },
      }
    : {
        ...defaultTheme,
        palette: {
          primary: yellow,
        },
      };
};

const App = (railsProps, railsContext) => {
  return () => {
    return (
      <BrowserRouter>
        <AdminContext
          dataProvider={dataProvider}
          authProvider={authProvider}
          i18nProvider={i18nProvider}
          theme={theme(false)}
        >
          <Resources />
        </AdminContext>
      </BrowserRouter>
    );
  };
};

const Resources = () => {
  const { permissions: initialPermissions } = usePermissions();
  const [permissions, setPermissions] = useState(initialPermissions);
  const [, setTheme] = useTheme();

  useEffect(() => {
    // dumb condition only to show my example, it could reset 2 or 3 times
    const condition = !permissions.something ? false : true;
    setTheme(theme(condition));
  }, [permissions]);

  return (
    <AdminUI layout={CustomLayout} loginPage={LoginPage}>
      {(updatedPermissions) => {
        setPermissions(updatedPermissions);
      }}
      <Resource name="example" />
    </AdminUI>
  );
};

[antoinefricker]

Thanks for your report, I could reproduce the bug

[fzaninotto]

Note that if you want to change the theme programmatically, instead of doing it from outside react-admin, you can use the useTheme hook, as explained in the Theming documentation:

https://marmelab.com/react-admin/Theming.html#changing-the-theme-programmatically

[antoinefricker]

You should note the bug fix on your sandbox using the react-admin 4.2.7. Consequently, I'll close the issue.

[newfylox]

You should note the bug fix on your sandbox using the react-admin 4.2.7. Consequently, I'll close the issue.

Well I just tried updating to react-admin 4.2.7 but the button didn't change from green to yellow. Don't know if I missed something

[fzaninotto]

Your CodeSandbox shows the right behavior with 4.2.7, so I think this is fixed.