Components completely ignore custom theme

[yanickrochon]

I have searched for this issue, and it appears that many similar issues are reported. Unfortunately, I can't find a resolution from any currently "resolved" issue for this.

I migrated from v4.12.3 to v5.0.4 using the guidelines and, after a few tweaks (like updating @date-io/date-fns), the app finally started with no errors.

But the theme was now the default one.

The app's root element is lazy-loaded because there are multiple entry points, and not all share the same theme.

But, first thing first...

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The component AppBar ignores the theme.

Expected Behavior 🤔

The component AppBar should not ignore the theme.

Steps to Reproduce 🕹

The very root of the app has this component, which manages errors :

class Application extends React.Component {

   static getDerivedStateFromError(error) {
      return { hasError: true, error };
   }
   
   state = { hasError: false };

   componentDidCatch(error, errorInfo) {
      console.error(error, errorInfo);
   }

   render() {
      const { layout: LayoutComponent, error } = this.props;
      const { hasError } = this.state;

      if (error) {
         console.error(error);
      }

      return hasError || error ? (
         <h1>:(</h1>
      ) : (
         <Suspense fallback={ null }>
            <AllProviders>
               <LayoutComponent />
            </AllProviders>
         </Suspense>
      );
   }
};

That component is rendered as :

Promise.all([
   /** loading various module bootstraps **/
]).then(modules => Promise.all(modules.map(module => module.default()))).then(() => {
   ReactDOM.render( <Application layout={ ApplicationLayout } /> , document.getElementById('app'));
}).catch(err => {
   //console.error(err);   
   ReactDOM.render( <Application layout={ ErrorLayout } error={ err } /> , document.getElementById('app'));
});

Note: ApplicationLayout is the actual app UI, whereas ErrorLayout is representing the error output, obviously.

All this worked flawlessly in v4.

Now, the theme is loaded in AllProviders. It's current implementation is this :

const AllProviders = ({ children }) => {
   const { theme } = useLocalPreferences(['theme']);
   const muiTheme = getTheme( theme );

   console.log("***", muiTheme);

   /*
   return (
      <StyledEngineProvider injectFirst>
         <ApolloProvider client={ apolloClient }>
            <HelmetProvider>
               <ThemeProvider theme={ getTheme( theme ) }>
               <CssBaseline />
                  <PermissionsProvider>
                     <LocalizationProvider dateAdapter={AdapterDateFns}>
                        {  children }
                     </LocalizationProvider>
                  </PermissionsProvider>
               </ThemeProvider>
            </HelmetProvider>
         </ApolloProvider>
      </StyledEngineProvider>
   );
   */

   return (
      <StyledEngineProvider injectFirst>
         <ThemeProvider theme={ muiTheme }>
            <AppBar position="static">
               <Toolbar>
                  <IconButton
                     size="large"
                     edge="start"
                     color="inherit"
                     aria-label="menu"
                     sx={{ mr: 2 }}
                  >
                     <MenuIcon />
                  </IconButton>
                  <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                     News
                  </Typography>
                  <Button color="inherit">Login</Button>
               </Toolbar>
            </AppBar>
         </ThemeProvider>
      </StyledEngineProvider>
   );
};


export default AllProviders;

The console.log echoes the theme's primary color as :

muiTheme = {
   ...
   palette: {
      ...
      mode: "light",
      primary: {
         contrastText: "#fff",
         dark: "rgb(178, 0, 0)",
         light: "rgb(255, 51, 51)",
         main: "#f00"
      },
      ...
   },
  ...
};

Obviously, the primary color is "red", however this is what I see :

Here is the link reproducing the issue

Context 🔦

Just trying to migrate from v4 to v5.

Your Environment 🌎

`npx @mui/envinfo`

System:
OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
Binaries:
Node: 16.4.2 - ~/.nvm/versions/node/v16.4.2/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v16.4.2/bin/yarn
npm: 7.20.5 - ~/.nvm/versions/node/v16.4.2/bin/npm
Browsers:
Chrome: 94.0.4606.81
Firefox: 93.0
npmPackages:
@emotion/react: ^11.5.0 => 11.5.0
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.51
@mui/lab: ^5.0.0-alpha.51 => 5.0.0-alpha.51
@mui/material: ^5.0.4 => 5.0.4
@mui/private-theming: 5.0.1
@mui/styled-engine: 5.0.1
@mui/styles: ^5.0.1 => 5.0.1
@mui/system: 5.0.4
@mui/types: 7.0.0
@mui/utils: 5.0.1
@types/react: 17.0.2
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2

[yanickrochon]

This one other example is pretty much a copy paste of the current docs' examples. The theme is completely ignored.

[yanickrochon]

So, there seems to be a confusion with which ThemeProvider to use. As described in the ussue #29126 :

The solution is to change

import { ThemeProvider } from "@mui/styles";

for

import { ThemeProvider } from '@mui/material/styles';

[Isarstyle]

Please update the documentation, i had the same issue with not accepting the theme styles because i followed this guide:
https://mui.com/styles/advanced/ <-- DO NOT FOLLOW THIS GUIDE :D

[danilo-leal]

@Isarstyle Hey! Feel free to open a PR with the documentation updates you believe we should do, we'd love to have you contributing if there's an opportunity to improve or anything ended up being misleading :)

[svict4]

I'm getting a similar issue, in that I have a custom design system (based on MUI), but when I import those components into my app, it's styles are not being overridden by a theme, instead it just defaults to the default/blue theme.

However, in the same file/app components that are imported directly from @mui/material such as Button are being overridden correctly. I'm using ThemeProvider exported by @mui/material/styles, so unsure if related to #29126, but maybe #29151?

It might be the way I'm exporting/importing my design system, as each component works fine when viewed in storybook wrapped in the ThemeProvider. Not that I've changed the way I've done it since v4.

[mnajdova]

@svict4 have you resolved the issue? If not could you share a repro? Sorry for commenting just now, but the issue was closed, so we assumed it was fixed in the meantime.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.