我正在尝试使用Drawer组件，并且我注意到当向Drawer提供道具open={true}时，在底层page/div上有一个默认的暗色覆盖。
是否有最佳实践材料批准的方法来消除调光？我在设置propvariant={“persistent”}方面取得了一些部分成功。这停止了调光，但也迫使我添加一个关闭按钮，只是为了关闭抽屉。
我正在寻找的是抽屉是可关闭的，当点击它的边界外，而它是打开的，我希望有调光去了（不诉诸于一个按钮关闭抽屉）。
我看过医生，试着把道具传过去
variant={“persistent”}
它去掉了覆盖，但现在当我点击抽屉外面时，它不会自动关闭。
<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>
);
}
相关文档链接:
不可见道具modalbackdropprops道具
设置variant=“临时”时，modal组件的道具可用。
