有一个Drawer和一个Button打开Drawer。Button和Drawer仅在窗口宽度小于600时才出现在DOM中。
这是Drawer和Button代码。
<Hidden smUp>
<Button
className={classes.button}
variant="outlined"
color="secondary"
endIcon={<Menu />}
onClick={toggleDrawer(true)}
data-testid="DrawerMenuButton"
>
Menu
</Button>
<SwipeableDrawer
anchor="left"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
disableDiscovery
data-testid="Drawer"
>
<div className={classes.list}>
<List data-testid="DrawerMenuList">
{drawerItems.map(({ icon: Icon, label, onClick }, index) => (
<ListItem key={index} button {...{ onClick }}>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText primary={label} />
</ListItem>
))}
</List>
</div>
</SwipeableDrawer>
</Hidden>
在测试期间运行screen.debug()时，以下是输出
<body>
<div />
</body>
表示宽度不在组件显示的范围内。
如何设置正确的宽度?
这是正常的，你有组件包装你的孩子(抽屉)，所以它不会渲染超过600px
你可以用css media queries system this来创建媒体查询，如果你想的话可以去掉hidden
也有一个例子，如果你想看到一些代码在行动，并有一个想法，你必须与你的这个你可以设置任何宽度为你的抽屉为任何断点:
import React, { useState } from "react"
import { makeStyles } from "@material-ui/core/styles"
import {
Drawer, Toolbar, List, Typography, ListItem, ListItemIcon,
ListItemText, Box, IconButton,
} from "@material-ui/core"
import clsx from "clsx"
const useStyles = makeStyles((theme) => ({
drawer: {
width: theme.sidebar.width,
flexShrink: 0,
whiteSpace: "nowrap",
"& .MuiDrawer-paper": {
top: "unset",
},
},
drawerOpen: {
width: theme.sidebar.width,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerClose: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: "hidden",
width: theme.spacing(7) + 1,
[theme.breakpoints.up("sm")]: {
width: theme.spacing(7) + 1,
},
},
expandButton: {
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(-2.5),
marginRight: theme.spacing(2.5),
},
},
divider: {
border: "1px solid",
borderColor: theme.palette.secondary.main,
margin: `0 ${theme.spacing(2)}px`,
},
}))
export default function Sidebar(props) {
const classes = useStyles()
return (
...
)
}