时间戳

首页 > 解决方案 > Material UI Drawer 组件在未聚焦时添加不需要的阴影

html - Material UI Drawer 组件在未聚焦时添加不需要的阴影

问题描述

我在使用该Material UI Drawer组件时遇到了一些问题。当我尝试在我的网页中显示它时，它会尝试将焦点强制到内部div，并在您关注其他任何地方时为组件添加阴影或边框。

有谁知道是什么导致这个阴影出现以及如何禁用它？下面的示例屏幕截图 - 你会在底部看到一个蓝色边缘（如果我调整元素的大小，这一直是一样的）

一旦您单击Drawer例如List元素内的内容，阴影就会消失。我认为这一定与模态组件有关吗？

<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
    <div className={classes.dummy}>
    </div>
</Drawer>

注意：floatingMenu该类仅在顶部添加一个边距55px（即高度AppBar- 仅此而已）。

在此处输入图像描述

标签： htmlcssreactjsmaterial-uiz-index

解决方案

这有点棘手，但只需一些道具和样式就可以了。为 UI 其余部分着色的元素是Backdrop组件的Modal组件。在临时模式下Drawer使用。Modal控件的hideBackdroppropModal控制是否看到阴影，您也可以将此 propDrawer直接传递给 。

但是，Modal组件本身仍会覆盖整个视口，从而阻止您在Drawer关闭之前单击 UI 的其他区域。我不确定是否有更简单的方法，但至少您可以Modal通过将其设置pointer-events为none. 要恢复抽屉本身的“可点击性”，您应该将其设置pointer-events回all.

因此，例如，只需使用styleprop 来制作简单的内联样式：

<Drawer hideBackdrop style={{ pointerEvents: 'none' }}>
  <div style={{ pointerEvents: 'all' }}>
    I'm a sidebar!
  </div>
</Drawer>

一个工作示例

如果您使用 Material UI 的样式解决方案，您还可以通过prop将pointer-events样式规则传递给Drawer自己的。Paperclasses

推荐阅读