multiple theme with material ui in react for multiple pages

Question

I have multiple pages . each stuff has a different theme or different palette. what is the best way to handle it in react with material ui

I tried with CustomTheemProvider like this tutorial:

https://techinscribed.com/building-react-app-using-material-ui-with-support-for-multiple-switchable-themes/

but while loading i still see the previous theme

so Imeplemeted theme like the following: created 2 themes 1 for home page and 1 for login and each of them manage separately in the theme folder by createMuiTheme() is it a good solution and gives control of themes?

app.ts

  return (
    <>
      {isReady === true ? (
          <ConnectedRouter history={history}>{routes}</ConnectedRouter>
      ) : (
        <Spinner />
      )}
    </>
  );

home.ts

  return (
    <ThemeProvider theme={mainTheme}>
      <CssBaseline />
      <Header />
      <main>
        <Container maxWidth="xl">
          .....
        </Container>
      </main>
    </ThemeProvider>
  );

Login page

<ThemeProvider theme={loginTheme}>
  <CssBaseline />
  login stuff
<ThemeProvider />

Khabir Khabir · Accepted Answer · 2020-05-10T00:20:44

Hi you can follow this example:

import React from 'react';
import { ThemeProvider, makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    background: theme.background,
    border: 0,
    fontSize: 16,
    borderRadius: 3,
    boxShadow: theme.boxShadow,
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
}));

function DeepChild() {
  const classes = useStyles();

  return (
    <button type="button" className={classes.root}>
      Theme nesting
    </button>
  );
}

export default function ThemeNesting() {
  return (
    <div>
      <ThemeProvider
        theme={{
          background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
          boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        }}
      >
        <DeepChild />
        <br />
        <br />
        <ThemeProvider
          theme={(outerTheme) => ({
            ...outerTheme,
            background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
            boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',
          })}
        >
          <DeepChild />
        </ThemeProvider>
      </ThemeProvider>
    </div>
  );
}

Source

multiple theme with material ui in react for multiple pages

1 Answers