javascript - 透明可滑动抽屉 Material -UI

Question

我需要知道如何从 Material UI 将“透明”样式的 porperty 背景应用到我的 SwipeableDrawer 组件...因为该组件在呈现时会在我的 html 文件中创建另一个组件，所以我无法通过我的代码更改他的背景。 我试着放一些，但组件似乎不喜欢它。

提前致谢。

Answer 1

如 Material-ui Docs 中所述您可以使用 ModalProps 覆盖 Modal 的样式。 使用 Modal 的 BackdropProps，您可以将背景设置为透明。

创建一个 styles 变量并应用必要的样式。

const styles = {
  BackdropProps: {
    background: 'transparent'
  }
};

使用 classes 属性将样式应用于 Backdrop 的根

<SwipeableDrawer ModalProps={{
          BackdropProps:{
            classes:{
              root:classes.BackdropProps
            }
          }
        }}
        {...otherProps}>

看看在 docs 中用类覆盖组件