具有材料 ui 的多个主题对多个页面做出反应

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

Source