несколько тем с пользовательским интерфейсом материала в реакции для нескольких страниц

Question

У меня несколько страниц. у каждого материала своя тема или другая палитра. как лучше всего справиться с этим в реакции с материалом ui

Я пробовал использовать CustomTheemProvider, как этот учебник:

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

но пока загрузка, я все еще вижу предыдущую тему

, поэтому Imeplemeted тема выглядит следующим образом: созданы 2 темы 1 для домашней страницы и 1 для входа в систему, и каждая из них управляется отдельно в папке темы с помощью createMuiTheme (), это хорошее решение и дает управление темами?

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>
  );

Страница входа

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

Answer 1

Привет, вы можете следовать этому примеру:

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>
  );
}

Источник