如何创建具有透明背景色的MUI对话框？ [英] How to create MUI Dialog with transparent background color?

问题描述

我正在尝试使用MUI创建加载状态指示器。但我希望对话框的背景色为none，并希望调整高度。但是我不能用他们提供的款式选项来做这件事。有解决方案吗？

Now it looks like this..

代码如下：

<Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

推荐答案

对于最新版本("@material-ui/core": "^1.2.3")，操作方法如下：

<Dialog
  {...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

请注意新的PaperProps道具。它不在文档中，但是如果您签出源代码，他们使用PaperProps作为您可以传入的道具之一-由于文档中没有这一点，但这可能会在将来的版本中发生变化，因此在这里要小心。

这篇关于如何创建具有透明背景色的MUI对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！