Question

我正在使用上下文API存储主题值。主题本身是使用<createMuiTheme>创建的，并通过<Layout>和<MuiThemeProvider>从<CssBaseline>传递给子级。我可以通过React DevTools看到状态变化，但是主题本身没有被应用-我对为什么...感到迷茫。

这里是codesandbox，并带有完整示例-警告：包含Samuel L. Ipsum。接下来是经过删节的版本。

默认和深色主题定义：

// theme/dark.js
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  typography: {
    useNextVariants: true
  },
  palette: {
    type: "dark"
  }
});

export default theme;

// theme/default.js
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  typography: {
    useNextVariants: true
  },
  palette: {
    type: "light"
  }
});

export default theme;

上下文：

// context/settings/SettingsContext.js
import React from "react";

export default React.createContext({
  darkMode: false
});

// context/settings/SettingsProvider.js
import React, { useState } from "react";
import SettingsContext from "./SettingsContext";

const storage = {
  getItem(key) {
    if (localStorage) {
      return localStorage.getItem(key);
    }
  },
  setItem(key, value) {
    if (localStorage) {
      return localStorage.setItem(key, value);
    }
  }
};

const SettingsProvider = props => {
  const [darkMode, setDarkMode] = useState(
    storage.getItem("darkMode") === "true"
  );
  const onSetDarkMode = darkMode => {
    setDarkMode(darkMode);
    storage.setItem("darkMode", darkMode);
  };
  return (
    <SettingsContext.Provider
      value={{
        darkMode,
        onSetDarkMode
      }}
    >
      {props.children}
    </SettingsContext.Provider>
  );
};

export default SettingsProvider;

index.js：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./containers/app";
import SettingsProvider from "./context/settings/SettingsProvider";

ReactDOM.render(
  <BrowserRouter>
    <SettingsProvider>
      <App />
    </SettingsProvider>
  </BrowserRouter>,
  document.getElementById("root")

app/index.js：

import React, { useState } from "react";
import { Switch, Route } from "react-router-dom";
import { default as home } from "../home/routes";
import Layout from "../layout";

const App = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  return (
    <div>
      <Layout anchorEl={anchorEl} setAnchorEl={setAnchorEl}>
        <Switch>
          {home.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              render={route.render}
            />
          ))}
        </Switch>
      </Layout>
    </div>
  );
};

export default App;

还有layout/index.js：

import React, { useContext } from "react";
import { MuiThemeProvider } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import defaultTheme from "../../themes/default";
import darkTheme from "../../themes/default";
import SettingsContext from "../../context/settings/SettingsContext";
import Header from "../../components/header/index";

const useStyles = makeStyles(theme => ({
  toolbarMargin: {
    ...theme.mixins.toolbar
  }
}));

const Layout = props => {
  const classes = useStyles();
  const context = useContext(SettingsContext);
  const theme = context.darkMode ? darkTheme : defaultTheme;
  const { children, anchorEl, setAnchorEl } = props;

  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <Header anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
      <main>
        <div className={classes.toolbarMargin} />
        {children}
      </main>
    </MuiThemeProvider>
  );
};

export default Layout;

我想念什么？

Answer 1

您要两次导入相同的主题。我建议使用命名的导出而不是默认的导出，这对于自动导入以及发现类似的错误很有帮助。

// layout/index.js

import defaultTheme from "../../themes/default";
import darkTheme from "../../themes/default"; // should be "../../theme/dark"

材质用户界面：未应用深色主题

1 个答案: