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

我在使用

材质UI

抽屉组件时遇到一些问题。当我尝试在我的网页中显示它时，它会尝试将焦点强制到内部
div
，如果您在其他地方聚焦，则会向组件添加阴影或边框

有人知道是什么导致这个阴影出现，以及如何禁用它吗？下面的示例屏幕截图-您将在底部看到一条蓝色边缘（如果我调整元素的大小，则整个过程都是相同的）

只要单击
抽屉中的内容
，例如
列表
元素，阴影就会消失。我想这一定是因为组件是模态的

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

{}>

注意：
floatingMenu
类仅在
55px
顶部添加边距（即
AppBar的高度
——无其他）

这有点棘手，但可能只需要一些道具和造型。为UI其余部分着色的元素是
模式组件的
背景组件<代码>抽屉
在临时模式下使用<代码>模式
。
Modal
的
hideBackdrop
道具控制是否可以看到阴影，您也可以直接将该道具传递到
抽屉

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

例如，只需使用
style
prop进行简单的内联样式设置：

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


我是一个边栏！


如果你玩弄Material UI的样式化解决方案，你还可以通过
类
道具将
指针事件
样式规则传递给
抽屉
自己的
纸张
。
在阅读了文档后，我能够以更简单的方式解决这个问题。在
模式上，它指出：

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

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

这解决了问题，我不再看到蓝色阴影边框。
似乎您希望使用
variant=“persistent”
（），而不是
variant=“temporary”
（默认设置）。
floatingMenu: {
    marginTop: '55px',
    outline: 0
}