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

【问题标题】：Material UI Drawer component adding unwanted shadow when not focusedMaterial UI Drawer 组件在未聚焦时添加不需要的阴影
【发布时间】：2020-02-01 12:38:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

您似乎想使用variant="persistent" (material-ui.com/components/drawers/#persistent-drawer) 而不是variant="temporary"（默认值）。

标签： html css reactjs material-ui z-index

【解决方案1】：

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

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

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

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

A working example

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

【讨论】：

【解决方案2】：

在阅读了更多文档后，我能够以更简单的方式解决问题。在Modalpage 上声明：

请注意，您可以使用大纲：0 CSS 属性。

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

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

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

【讨论】：