抽屉组件背景阻止用户与页面交互是否会打开答案

【问题标题】：Drawer Component Backdrop blocking users from interacting with page will it is open抽屉组件背景阻止用户与页面交互是否会打开
【发布时间】：2021-03-27 05:49:02
【问题描述】：

我有一个固定在底部的抽屉组件，但我仍然想与抽屉上方的页面进行交互，但是如果我可以点击退出，但抽屉关闭了，所以我尝试了持久和永久的变体都不起作用他们实际上做到了，所以当我点击 if 时什么都没有发生。我认为它与上面的间距或填充有关，但如果有人知道如何禁用它，将不胜感激。

【问题讨论】：

stackoverflow.com/questions/58020202/…的可能重复
我以前看过那个帖子。最大的不同是我的锚在底部，我的抽屉里有内容。如果它是一个左锚，我明白如何做到这一点。我想我已经缩小了背景组件的问题，如果我可以将它的高度限制在与抽屉相同的高度，那么它后面的组件就可以使用
或者我可能只是想改变背景组件的 z-index，因为我已经将不可见性设置为 true，但这是通过道具，不知道如何将 CSS 添加到该组件导致它看起来不像它暴露在 api material-ui.com/api/drawer

标签： node.js reactjs material-ui

【解决方案1】：

我通过删除.MuiDrawer-modal div 的“inset”CSS 属性解决了这个问题：

.MuiDrawer-modal {
  inset: unset !important;
}

【讨论】：

【解决方案2】：

解决了我的问题，我不得不对 Paper 组件进行一些高度更改，并且它似乎按照我想要的方式工作。您可以在@material-ui/core/styles 目录中使用makeStyles 方法覆盖css。我使用了 classes 属性示例

// Outside the component
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  drawer: {
    css here ... 
  }
})
// Inside Component 
const classes = useStyles() // the make styles returns a function and calling the useStyles returns an object with the css. 

// Inside return 
<Drawer
 anchor="bottom" 
 classes={{ paper: classes.drawer }}
>
 Content... 
</Drawer>

【讨论】：