javascript - 子布局组件中的 React/MUI 暗模式切换

Question

在 React+MUI (JS) 中，我试图在布局组件中实现暗模式切换，但找不到任何有关状态的解决方法。目标是在布局中呈现的开关内切换模式。你会在这里找到我的 App.js（带有路由器和布局）和我的 Layout.js

// App.js (incl. routes and react-router-dom)    
const [ darkMode, setDarkMode ] = useState(false)

const theme = createMuiTheme({
   palette: {
    type: darkMode ? "dark" : "light" ,
   }
})

<ThemeProvider theme={theme}>
//...components
    <Layout {...darkMode}>
    //... other components

然后对于 Layout 组件：

const Layout = (props) => {

const [ darkMode, setDarkMode ] = React.useState(props.darkMode)
useEffect(() => {
    setDarkMode(props.darkMode)
}, [props.darkMode])

const theme = useTheme()
...
<Switch checked={darkMode} onChange={() => setDarkMode(!darkMode)} />
...
{props.children}

任何帮助都会令人愉快，因为实际上没有任何效果。

标签： javascriptreactjsmaterial-uithemesstate

Answer 1

这对我有用：

import { useMemo, useState } from "react";
import {
  Button,
  createMuiTheme,
  ThemeProvider,
} from "@material-ui/core";

const rootTheme = (darkMode) => ({
  palette: {
    type: darkMode ? "dark" : "light"
  }
});

const App = () => {
  const [darkMode, setDarkMode] = useState(true);
  const theme = useMemo(() => createMuiTheme(rootTheme(darkMode)), [darkMode]);

  const onClick = () => {
    setDarkMode(!darkMode);
  };

  return (
    <ThemeProvider theme={theme}>
      <Button onClick={onClick}>Change Theme</Button>
    </ThemeProvider>
  );
};

export default App;