透明可滑动抽屉材质-UI

Question

我需要知道如何从Material UI将“透明”样式的背景应用于我的SwipeableDrawer组件...由于该组件在呈现时在html文件中创建了另一个组件，因此我无法从代码中更改其背景。我试图放一些，但似乎该组件不喜欢它。

提前致谢。

Answer 1

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

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

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

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

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

看看文档中具有类的重写组件