- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Drawer
组件,我注意到当抽屉被输入 prop open={true}
时,有一个默认的灰色覆盖层底层页面/div。
是否有经 Material 批准的最佳实践方法来消除调光?我在设置 prop variant={"persistent"}
方面取得了部分成功。这会停止变暗,但它也迫使我添加一个关闭按钮来关闭抽屉。
我正在寻找的是抽屉在其边界外单击时可关闭,并且当它打开时我希望调光消失(不诉诸按钮来关闭抽屉)。
我查看了文档并尝试传递 Prop
variant={"持久"}
这消除了覆盖层,但现在当我点击抽屉外部时,它不会自动关闭。
<Drawer
open={open}
anchor="top"
onClose={toggleDrawer}
variant={"persistent"}
modal={true}
>
我想让调光消失(不使用按钮)。
是否有任何经过 Material 批准的选项?我可以尝试 CSS hack,但我不想破坏 Material 的 CSS 或出现重叠闪烁问题。
最佳答案
您可以添加BackdropProps={{无形: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>
);
}
相关文档链接:
invisible
属性Modal
的 BackdropProps
属性The props of the
Modal
component are available whenvariant="temporary"
is set.
关于reactjs - MUI - 删除抽屉中的覆盖层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58020202/
我已将 MUI 从 v4 升级到 v5。但是,我现在很难理解主题如何与可用的不同主题解决方案一起使用。我不太明白在哪里使用 MUI 主题/样式组件以及何时使用情感组件。 在新组件中,我使用 sx 属性
早上好, 我爱上了 MUI,有很多事情可以做。但是,在广泛使用它之后,我注意到 MUI Divider 在它是 Container 或 Paper 组件的子组件时不会显示。我找不到任何关于为什么会这样
我使用 MUI 在我的 React.JS 元素的索引中创建了一个主题。当我尝试将我的风格应用到我的 Appbar主题没有正确修改菜单按钮或菜单本身。按钮看起来是通用的默认值,当它应该与 Appbar
我已经查看了许多关于弹出框 anchor 定的问题,但是在使用 Material 表库中的 MaterialTable 元素时我没有看到任何问题:https://github.com/mbrn/mat
在 Material-UI v5 中,一些 API 使用是从 @mui/material/styles 导入的, 喜欢 useTheme .并且一些 API 使用是从 @mui/styles 导入的,
这个问题在这里已经有了答案: Use calc() function in makeStyles (1 个回答) 10 个月前关闭。 这篇帖子在10个月前被编辑并提交审核,并且未能重新打开该帖子: 原
我想覆盖全局 .Mui-disabled我的主题中的 CSS 规则覆盖。我可以为这样的特定组件执行此操作(在 Material-UI v4.1.x 中): MuiTheme['overrides']
我可能有一个由来已久的问题,但我的按钮无法配合!这是我第一次使用 MUI,所以可能有些地方我不明白。 请看sandbox . 我希望按钮在一行中居中,中间有一点空间。我真的以为 会起作用,但它只是把
我想制作一个“使用条款”复选框,并且我正在使用 FormControlLabel 为其嵌套一个复选框,但我需要创建一个链接,单击该链接会打开一个对话框组件,这是呈现条款,但是当我点击链接“”时,它也会
我创建了一个 Appbar React.js 中的组件,其中包含 3 个按钮,但是当我将鼠标悬停在这些按钮上时,我想更改颜色。背景颜色为#3c52b2文本颜色为 #fff .当我将鼠标悬停在按钮上时,
我正在尝试使用 Drawer 组件,我注意到当抽屉被输入 prop open={true} 时,有一个默认的灰色覆盖层底层页面/div。 是否有经 Material 批准的最佳实践方法来消除调光?我在
我将Material-UIv1.0.0-beta.34 Tooltip与Checkbox和FormControlLabel一起使用,实际上,当我将鼠标悬停在Checkbox上的标签时,在一种情况下,当
复制文件时,我对它们做了很少的事情......是否可以在显示复制文件的文本框中通知用户安装过程中发生了什么?我试图在互联网上找到该信息,但没有运气......不知道要寻找什么...... 最佳答案 我
我在我的应用程序中使用 MUI Card 和 CardMedia 组件,但不知道如何在图像上叠加文本。这是我正在尝试的一个简化示例: this text should o
我想在鼠标悬停在整个 Card 上时设置深度动画。我尝试了这个(所以我是 React 的新手)但我不知道该怎么做: 提前致谢。 最佳答案 constructor(props) { super(
堆栈:Meteor + React + MUI 这是我的“主要”渲染器组件的完整代码: // Sorry for not giving material-UI CSS, // cause it can
这个问题在这里已经有了答案: CSS child selector in MUI (5 个答案) 关闭 1 年前。 是否可以在 MUI 中为 Grid 中的所有 Field 设置样式?我已经知道如何
我目前正在自定义 MUI Select 方法,但是,我发现很难将鼠标悬停在“NarrowDownIcon”上: 我想在鼠标悬停时将此图标的 backgroundColor 更改为“蓝色”,这是我的代码
我在我的整个项目中都使用了脉轮用户界面,但脉轮似乎没有日期选择器组件,所以我尝试使用 Material 的组件,但只有当我删除 index.js 中的 ChakraProvider 时它似乎才不起作用
我想创建一个左侧带有图标的横幅区域。中间是两行(标题和副标题)文本。然而,所有这三个都出现在不同的行上。 您可以在此处查看问题:https://codesandbox.io/s/bold-brook-
我是一名优秀的程序员,十分优秀!