reactjs - 如何创建具有透明背景色的 Material UI 对话框？

Question

我正在尝试使用 Material UI 创建一个加载状态指示器。但我希望对话框的背景颜色为 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>

Answer 1

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

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

记下新的 PaperProps 属性。它不在文档中，但如果您查看源代码，他们会使用 PaperProps 作为您可以传入的 Prop 之一 - 由于这不在文档中，因此这可能会随着 future 版本的变化而改变，所以这里要小心。