Reactjs / Material UI => MuiTheme 和 rerender 在主题已经渲染时不起作用

编程问答 2022-04-24

问题描述

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

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

在我的示例中，我定义了 3 个简单的 MuiTheme 覆盖（红色、绿色、蓝色）。

当我们单击尚未呈现的主题的按钮时，主题切换器工作正常。当我单击按钮切换器为已经重新编辑的主题时，前视图中没有任何附加或任何内容。事实上，如果我们查看 react 开发 puglin，我们会看到背景颜色按预期发生了很好的变化，但界面没有刷新。 由于主题已加载到内存中，因此问题看起来像是重新渲染条件永远不会成立。

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

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

我的代码可以在这里查看和播放： https://codesandbox.io/s/material-ui-theme-test-w1bbg 应用程序

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

theme.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
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmaterial-uireactjsreactjsreactjsreactjssetstatesetstatethemeprovider