Material UI 抽屉组件在未聚焦时添加不需要的阴影

Question

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

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

只要您点击 Drawer 中的内容，例如阴影消失的 List 元素。我认为这一定与模态组件有关？

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

注意：floatingMenu class 仅在 55px 的顶部添加边距（即 AppBar 的高度 - 没有其他）。

Answer 1

这有点棘手，但只需要一些道具和样式就可以做到。遮蔽 UI 其余部分的元素是 Modal 组件的 Backdrop 组件。 Drawer 在临时模式下使用 Modal。 Modal的hideBackdrop属性控制阴影是否可见，也可以直接将此属性传递给Drawer。

但是，Modal 组件本身仍会覆盖整个视口，阻止您在 Drawer 关闭之前单击 UI 的其他区域。我不确定是否有更简单的方法，但至少你可以通过使用 CSS 样式来实现 Modal 元素 "through-clickable" 通过将其 pointer-events 设置为none。要恢复抽屉本身的 "clickability"，您应该将其 pointer-events 设置回 all。

因此，例如，仅使用 style 属性来制作简单的内联样式：

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

A working example

如果你玩弄 Material UI 的样式解决方案，你也可以将 pointer-events 样式规则传递给 Drawer 自己的 Paper 通过 classes 属性

Answer 2

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

Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.

基于此，我没有触及问题中的组件或内部组件，而是简单地添加了一个额外的 CSS class outline: 0 到 floatingMenu （已经传递给 PaperProps):

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

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

Material UI 抽屉组件在未聚焦时添加不需要的阴影

Material UI Drawer component adding unwanted shadow when not focused

html

css

z-index

reactjs

material-ui