如何嵌套Context和MUI的theme provider？

Question

所以我目前有一个状态可以在一个有很多嵌套组件的网站上切换暗/亮模式。我有根 App.js:

function App() {
    return (
        <DarkModeProvider>
            <div className="App">
                <HomePage />
            </div>
        </DarkModeProvider>
    );
}

DarkModeProvider 是我的反应上下文，在下一个组件中，我有一个布局，其中包含我的导航和路由，它包含在 ThemeProvider 中：

const HomePage = () => {
const { isDarkTheme } = useContext(DarkModeContext);

return (
    <ThemeProvider theme={isDarkTheme ? createTheme(darkTheme) : 

createTheme(lightTheme)}>
            <DrawerProvider>
                <Router>
                    <Box sx={{ display: "flex" }}>
                        <Box>
                            <HomePageInner />
                        </Box>

                        <Routes>
                            <Route path="/inventory" element={<Inventory />} />
                            <Route path="/orders" element={<Orders />} />
                            <Route path="/vendors" element={<Vendors />} />
                        </Routes>
                    </Box>
                </Router>
            </DrawerProvider>
        </ThemeProvider>
    );
};

它工作正常，但是，我想访问根 App 组件中的“应用程序”class 中的主题上下文。如果我用 ThemeProvider 包装 DarkModeProvider，我将无法访问暗/亮模式的状态，如果我用 DarkModeProvider 包装 ThemeProvider，我将无法从我的上下文中访问 isDarkTheme 状态。

是否有更好的格式化方法？我真正想要的是在源文件夹中有一个 css / style sheet 与应用程序组件处于同一级别。当我的主题提供程序不在我的应用程序组件中时，我不确定如何访问它。或者如何在包裹在主题提供者内部时访问我的暗模式状态（反之亦然）。

例如我的App.CSS:

body {
    background-color: theme.primary.palette.main; 
    /* I would like the body to follow my MUI theme. */
}

a {
    color: inherit;
    text-decoration: none;
}

暗模式提供商：

import { createContext, useState } from "react";

const DarkModeContext = createContext();

export const DarkModeProvider = ({ children }) => {
    const [isDarkTheme, setIsDarkTheme] = useState(false);

    const changeTheme = () => {
        setIsDarkTheme(!isDarkTheme);
    };

    return (
        <DarkModeContext.Provider
            value={{
                isDarkTheme,
                changeTheme,
            }}
        >
            {children}
        </DarkModeContext.Provider>
    );
};

export default DarkModeContext;

Answer 1

您可以将 ThemeProvider 组件移动到 App.js 文件中，并在那里为 isDarkTheme 设置一个状态，然后您可以将其用于 DarkModeProvider 和 ThemeProvider

function App() {
  const [isDarkTheme, setIsDarkTheme] = useState(false);

  const changeTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };
  
  return (
      <DarkModeProvider value={{ isDarkTheme, changeTheme }}>
        <ThemeProvider theme={isDarkTheme ? createTheme(darkTheme) : createTheme(lightTheme)}>
          <div className="App">
            <HomePage />
          </div>
        </ThemeProvider> 
      </DarkModeProvider>
  );
}

暗模式提供商：

import { createContext } from "react";

const DarkModeContext = createContext();

export const DarkModeProvider = ({ children, value }) => {
    return (
        <DarkModeContext.Provider value={value}>
          {children}
        </DarkModeContext.Provider>
    );
};

export default DarkModeContext;

如何嵌套Context和MUI的theme provider？

How to nest Context and MUI's theme provider?

javascript

reactjs

material-ui

themes

darkmode