0

在 v5 中，尝试创建一个切换来从暗模式切换到亮模式对我来说非常困难。

直接使用来自 MUI Sandbox MUI darkmode的代码，我尝试将代码分开以在 app.js 和我的 Navbarpractice.js 中工作。

应用程序.js

import React from "react";
import useMediaQuery from '@mui/material/useMediaQuery';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Paper } from "@mui/material";
import BasicCard from "./components /Card.js";
import Navbarpractice from "./components /Navbar/Navbarpractice"

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });


function App() {
  const [mode, setMode] = React.useState('light');
  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
      },
    }),
    [],
  );

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode,
        },
      }),
    [mode],
  );

  return (
    <ColorModeContext.Provider value={colorMode}>
    <ThemeProvider theme={theme}>
    <div className="App">
    <Navbarpractice/>
      <BasicCard/>
    </div>
    </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export default App;

Navbarpractice.js

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
import { teal } from '@mui/material/colors';
import { withStyles } from '@mui/styles';
import { Switch } from '@mui/material';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';


const label = { inputProps: { 'aria-label': 'Switch' } };

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });

const theme = createTheme({
  
    Navbar: {
      primary: {
        // Purple and green play nicely together.
        main: teal[500],
      },
      secondary: {
        // This is green.A700 as hex.
        main: '#11cb5f',
      },
    },
  });

  const TealTextTypography = withStyles({
    root: {
      color: "#008080"
    }
  })(Typography);

function Navbar() {

  const theme = useTheme();
  const colorMode = React.useContext(ColorModeContext);

    return (
      <ColorModeContext.Provider value={colorMode}>
    <ThemeProvider theme={theme}>\
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static"
        style={{ background: 'transparent', boxShadow: 'none'}}>
          <Toolbar>
            <IconButton
              size="large"
              edge="start"
            
              aria-label="menu"
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
            <TealTextTypography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Mentors
            </TealTextTypography>
            <TealTextTypography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Mentees
            </TealTextTypography>

            <Box
            sx={{
            display: 'flex',
            width: '100%',
            alignItems: 'center',
            justifyContent: 'center',
            bgcolor: 'background.default',
            color: 'text.primary',
            borderRadius: 1,
            p: 3,
            }}
            >
            <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
            { theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
            </IconButton>

            </Box>
          </Toolbar>
        </AppBar>
      </Box>
      </ThemeProvider>
      </ColorModeContext.Provider>
    );
  }

export default Navbar;

我确定我混淆了我的常量。并将它们放置在错误的位置。虽然我是新手，而且 Mui 我确实设法让它静态工作，但是，切换被证明是困难的。

4

0 回答 0