0

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

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

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

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

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

在此处输入图像描述

4

2 回答 2

0

这有点棘手，但只需一些道具和样式就可以了。为 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

于 2020-03-09T16:03:58.397 回答
0

在阅读了更多文档后，我能够以更简单的方式解决问题。在Modal 页面上它指出：

请注意，您可以使用 outline: 0 CSS 属性禁用轮廓（通常是蓝色或金色）。

基于此，我没有触及我的问题中的组件或内部组件，而是简单地添加了一个额外的 CSS 类（已传递给outline: 0）：floatingMenuPaperProps

floatingMenu: {
    marginTop: '55px',
    outline: 0
}

这解决了问题，我不再看到蓝色阴影边框。

于 2020-03-29T14:31:25.003 回答