透明滑动抽屉 Material-UI

Posted 2023-02-22

【中文标题】透明滑动抽屉 Material-UI

【英文标题】：Transparent Swipeable drawer Material-UI

【发布时间】：2019-01-05 02:54:28

【问题描述】：

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

提前致谢。

【参考方案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 之一，以防万一。