如何嵌套Context和MUI的主題提供者？

因此，我目前有一個狀態可以在具有大量嵌套組件的網站上切換暗/亮模式。我有一個根 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 組件中的“app”類中訪問主題背景關系。如果我用 ThemeProvider 包裝 DarkModeProvider，我將無法訪問暗/亮模式的狀態，如果我用 DarkModeProvider 包裝 ThemeProvider，我將無法從我的背景關系中訪問 isDarkTheme 狀態。

Is there a better practice to format this? What I really want is to have a css / style sheet in the source folder as the same level as the app component. I'm unsure how to access my theme provider when it's not in my app component. OR how to have my dark mode state accessible while wrapped inside of the theme provider (or vice versa).

For example my 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;
}

Dark Mode Provider:

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;

uj5u.com熱心網友回復：

您可以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;

標籤：javascript reactjs material-ui themes darkmode

上一篇：有多個音頻，但只播放回圈中的第一個

下一篇：選擇文本后查找uitextview上剩余的字符數并點擊剪切