梅-去掉抽屉里的覆盖物? [英] MUI - Remove overlay in Drawer?
本文介绍了梅-去掉抽屉里的覆盖物?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用Drawer
组件,我注意到当向抽屉提供道具open={true}
时,在基础页面/div上有一个默认的灰色覆盖。
是否有经材料批准的最佳实践方法来消除暗淡?我设置道具variant={"persistent"}
取得了一定的成功。这会停止调暗,但也会强制我添加一个关闭按钮来关闭抽屉。
我要找的是在其边界外单击时可以关闭的抽屉,并且在它打开时,我想让暗显消失(而不是求助于关闭抽屉的按钮)。
我已经看过文档并尝试传递道具
VARIANT={&QOOT;PERSISTENT&QOOT;}
这会消除覆盖,但现在当我在抽屉外面单击时,它不会自动关闭。
<Drawer
open={open}
anchor="top"
onClose={toggleDrawer}
variant={"persistent"}
modal={true}
>
我希望取消调暗(不使用按钮)。
是否有物料审批的选项?我可以尝试CSS破解,但我不想破坏材料的CSS或出现覆盖的闪光。
推荐答案
您可以添加BackdropProps={{ invisible: true }}
。
工作示例:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import Button from "@material-ui/core/Button";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
const useStyles = makeStyles({
list: {
width: 250
}
});
export default function TemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false
});
const toggleDrawer = (side, open) => event => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<div>
<Button onClick={toggleDrawer("left", true)}>Open Left</Button>
<Drawer
BackdropProps={{ invisible: true }}
open={state.left}
onClose={toggleDrawer("left", false)}
>
{sideList("left")}
</Drawer>
</div>
);
}
相关文档链接:
- https://material-ui.com/api/backdrop/#props
- 记录
invisible
道具
- 记录
- https://material-ui.com/api/modal/#props
- 记录
Modal
的BackdropProps
道具
- 记录
- https://material-ui.com/api/drawer/#import
设置
variant="temporary"
时,Modal
组件的道具可用。
这篇关于梅-去掉抽屉里的覆盖物?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文