使用React和Material UI实现多个页面的多主题

Question

我有多个页面，每个页面都有不同的主题或不同的颜色板。在react和material ui中处理它的最佳方法是什么？

我尝试使用CustomThemeProvider，就像这篇教程中所说的一样:

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

但在加载时，我仍然看到以前的主题。

因此，我实现了以下主题：

创建了两种主题，一个用于主页，一个用于登录，并通过createMuiTheme（）在theme文件夹中分别管理。

这是一个好的解决方案吗？可以控制主题吗？

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 /> 

- Tuz

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

来源

- Khabir

---

是的，它可以工作，但例如，在加载时我看到了暗色主题，只有在组件刷新后我才看到了亮色主题。 - Tuz