材质 UI 抽屉变灰，但未滑入视图

Question

我对 SD 还很陌生，正在利用空闲时间练习以变得更好，因此欢迎所有建议（但请像我是小学生一样向我提供建议）。我只是想让抽屉组件功能正常工作，然后构建它来满足我的需求，但目前，即使我几乎完全从 Material UI 复制并粘贴 Javascript，抽屉组件也无法正常工作。我的 AppBar 显示良好，当我单击 MenuRoundedIcon 时，显示会变灰，但抽屉不会从左侧滑入。如果我再次点击，它就会恢复正常。我无法让侧边栏滑入“主页”、“关于”、“连接”的最终列表。这是我的代码：

应用程序.js

import './App.css';
// pages
import Home from './components/pages/Home'; 
import About from './components/pages/About'; 
import NavBar from './components/NavBar';
import ConnectCard from './components/ConnectCard';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

const myTheme = createTheme({
  palette: {
    primary: {
      light: '#347055',
      main: '#024D2B',
      dark:'#01351e'
    },
    secondary: {
      dark: '#b28900',
      main: '#ffc400',
      light: '#ffcf33'
    }
  },
  components: {
    MuiCard: {
      styleOverrides: {
        root: {
          maxWidth: '55rem',
          margin: '2rem',
        }
      }
    },
    MuiButton: {
    }
  }
  });




function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <NavBar />
      <BrowserRouter>
        <main>
          <Routes>
            <Route index element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<ConnectCard />} />
          </Routes>
        </main>
      </BrowserRouter>
    </ThemeProvider>
    
  );
}

export default App;

NavBar.js

import React, { useState } from "react";
import { Link, NavLink } from 'react-router-dom'

// Material UI
import { AppBar, Box, Toolbar, IconButton, Typography, Button, MenuItem, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import Drawer from "@mui/material/Drawer";

// Icons
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
import HomeIcon from '@mui/icons-material/Home';
import InfoIcon from '@mui/icons-material/Info';
import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';

// Components
import ConnectCard  from './ConnectCard';


// const 

export default function NavBar(){
    const [drawerState, setDrawerState] = useState({
        top: false,
        right: false,
        bottom: false,
        left: false
    });
    console.log(`Drawer`, drawerState)
    const toggleDrawer = (anchor, openStatus) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setDrawerState({ ...drawerState, [anchor]: openStatus })
    }
    
    const list = (anchor) => {
        <Box
            sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
            // role='presentation'
            onClick={() => toggleDrawer(anchor, false)} //this is where i will put the redirect
            onKeyDown={() => toggleDrawer(anchor, false)}
        >
            <List>
                {['Home', 'About', 'Connect'].map((text) => (
                    <ListItem key={text} disablePadding>
                        <ListItemButton>
                            <ListItemIcon>
                                {<HomeIcon />}
                            </ListItemIcon>
                            <ListItemText primary={text} />
                        </ListItemButton>
                    </ListItem>
                ))}
            </List>
        </Box>
    }
    return (
        <>
            <Box sx={{ flexGrow: 1 }}>
                <AppBar position="static">
                    <Toolbar>
                        <Button
                            color={"secondary"}
                            onClick={toggleDrawer('left', true)}
                            edge='start'
                        >{<MenuRoundedIcon />}
                        </Button>
                        <Drawer
                            open={drawerState.left}
                            direction={'left'}
                            onClose={() => setDrawerState({ left: false })}
                        >{list('left')}
                        </Drawer>
                        <Typography
                            variant="h2"
                            component="h4"
                            sx={{ flexGrow: 1 }}
                            align={'center'}
                        >
                            Lee R. Roberts
                        </Typography>
                    </Toolbar>
                    
                </AppBar>
            </Box>
        </>
    );
};import React, { useState } from "react";
import { Link, NavLink } from 'react-router-dom'

// Material UI
import { AppBar, Box, Toolbar, IconButton, Typography, Button, MenuItem, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import Drawer from "@mui/material/Drawer";

// Icons
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
import HomeIcon from '@mui/icons-material/Home';
import InfoIcon from '@mui/icons-material/Info';
import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';

// Components
import ConnectCard  from './ConnectCard';


// const 

export default function NavBar(){
    const [drawerState, setDrawerState] = useState({
        top: false,
        right: false,
        bottom: false,
        left: false
    });
    console.log(`Drawer`, drawerState)
    const toggleDrawer = (anchor, openStatus) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setDrawerState({ ...drawerState, [anchor]: openStatus })
    }
    
    const list = (anchor) => {
        <Box
            sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
            // role='presentation'
            onClick={() => toggleDrawer(anchor, false)} //this is where i will put the redirect
            onKeyDown={() => toggleDrawer(anchor, false)}
        >
            <List>
                {['Home', 'About', 'Connect'].map((text) => (
                    <ListItem key={text} disablePadding>
                        <ListItemButton>
                            <ListItemIcon>
                                {<HomeIcon />}
                            </ListItemIcon>
                            <ListItemText primary={text} />
                        </ListItemButton>
                    </ListItem>
                ))}
            </List>
        </Box>
    }
    return (
        <>
            <Box sx={{ flexGrow: 1 }}>
                <AppBar position="static">
                    <Toolbar>
                        <Button
                            color={"secondary"}
                            onClick={toggleDrawer('left', true)}
                            edge='start'
                        >{<MenuRoundedIcon />}
                        </Button>
                        <Drawer
                            open={drawerState.left}
                            direction={'left'}
                            onClose={() => setDrawerState({ left: false })}
                        >{list('left')}
                        </Drawer>
                        <Typography
                            variant="h2"
                            component="h4"
                            sx={{ flexGrow: 1 }}
                            align={'center'}
                        >
                            Lee R. Roberts
                        </Typography>
                    </Toolbar>
                    
                </AppBar>
            </Box>
        </>
    );
};

即使我设置了，我得到的只是灰色的叠加层。为什么当您单击“向左”或“向右”时，侧边栏不会像上面链接中那样滑入。

Answer 1

我感觉像个白痴...如果我将其放在里面，我会得到幻灯片和我想要的列表...我很困惑为什么文档中没有。我是否在某个地方错过了这一步？

 return (
    <>
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <Button
                        color={"secondary"}
                        onClick={toggleDrawer('left', true)}
                        edge='start'
                    >{<MenuRoundedIcon />}
                    </Button>
                    <Drawer
                        open={drawerState.left}
                        direction={'left'}
                        onClose={() => setDrawerState({ left: false })}
                    >
                        <List>
                            {['Home', 'About', 'Connect'].map((text) => (
                                <ListItem key={text} disablePadding>
                                    <ListItemButton>
                                        <ListItemIcon>
                                            {<HomeIcon />}
                                        </ListItemIcon>
                                        <ListItemText primary={text} />
                                    </ListItemButton>
                                </ListItem>
                            ))}
                        </List>
                    </Drawer>
                    <Typography
                        variant="h2"
                        component="h4"
                        sx={{ flexGrow: 1 }}
                        align={'center'}
                    >
                        Lee R. Roberts
                    </Typography>
                </Toolbar>
                
            </AppBar>
        </Box>
    </>
);