透明滑动抽屉 Material-UI

【问题标题】：Transparent Swipeable drawer Material-UI透明滑动抽屉 Material-UI
【发布时间】：2019-01-05 02:54:28
【问题描述】：

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

提前致谢。

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案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 中的类覆盖组件

【讨论】：

invisible 也是<Backdrop> props 之一，以防万一。