0

我正在学习 React,并尝试使用 Material Ui 进行 UI 设计。

我已经按照一些示例来了解谁管理自定义主题和 MuiTheme。现在我对 MuiTheme 和 MuiThemeProvider 很感兴趣。

在我的示例中,我定义了 3 个简单的 MuiTheme 覆盖(红色、绿色、蓝色)。

当我们单击尚未渲染的主题的按钮时,主题切换器工作正常。当我单击按钮切换器以获取已重新设计的主题时,前视图中没有任何附加或任何内容。事实上,如果我们查看 react development puglin,我们会看到背景颜色按预期变化良好,但界面没有刷新。由于主题已加载到内存中,因此问题看起来像重新渲染条件永远不会成立。

你能帮我理解为什么我不能回到旧主题吗?

对于复制过程,您可以按您想要的绿色按钮、下一个蓝色按钮和下一个所有按钮。

我的代码可以在这里查看和播放: https: //codesandbox.io/s/material-ui-theme-test-w1bbg App.js

import React, { Fragment, useContext, useState } from "react";

import { AppBar, Button, Toolbar, Typography } from "@material-ui/core";
import { MuiThemeProvider } from "@material-ui/core";
import { getThemeByName } from "./theme";

export const ThemeProvider = (props) => {
  const [themeName, _setThemeName] = useState("redTheme");
  const theme = getThemeByName(themeName);

  return (
    <ThemeContext.Provider value={_setThemeName}>
      <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
    </ThemeContext.Provider>
  );
};

const ThemeContext = React.createContext((theme) => {});

function App() {
  const setThemeName = useContext(ThemeContext);

  return (
    <Fragment>
      <AppBar position="static">
        <Toolbar variant="dense">
          <Typography variant="h6" color="inherit">
            <Button
              variant="contained"
              color="primary"
              onClick={() => setThemeName("blueTheme")}
            >
              Set blue Theme
            </Button>
            <Button
              variant="contained"
              color="secondary"
              onClick={() => setThemeName("greenTheme")}
            >
              Set green Theme
            </Button>
            <Button
              variant="contained"
              color="secondary"
              onClick={() => setThemeName("redTheme")}
            >
              Set red Theme
            </Button>
          </Typography>
        </Toolbar>
      </AppBar>
    </Fragment>
  );
}

export default App;

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App, { ThemeProvider } from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
  rootElement
);

主题.js

const { createMuiTheme } = require("@material-ui/core");

export const redTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#FF0000"
    }
  }
});

export const greenTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#008000"
    }
  }
});

export const blueTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#0000FF"
    }
  }
});

export function getThemeByName(theme) {
  return themeMap[theme];
}

const themeMap = {
  redTheme,
  greenTheme,
  blueTheme
};
4

0 回答 0