如何创建具有透明背景色的material-ui对话框并更改其高度? [英] How to create material-ui dialog box with transparent background color and change its height?

问题描述

我正在尝试使用物料ui创建装载状态指示器.但是我希望对话框的背景色为 none ，并且还希望调整高度.但是我不能通过他们提供的样式选项来做到这一点.有什么办法吗?现在看起来像这样.代码如下:

I'm trying to create a loading status indicator using material ui. But I want the background color of dialogue box as none and also want to adjust the height. But I'm not able to do it by the style option provided by them. Any solution? Now it looks like this.. Code 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" )，这里是这样的完成:

For the latest version ("@material-ui/core": "^1.2.3"), here is how it's done:

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

记下新的 PaperProps 道具.它不在文档中，但是如果您查看源代码，他们会使用 PaperProps 作为您可以传入的道具之一-由于它不在文档中，因此可能会随着将来的版本而改变，所以请注意这里.

Take note of the new PaperProps prop. It's not in the documentation but if you check out the source, they are using PaperProps as one of the props you can pass in - since this isn't in the docs, this might change with future versions though, so be careful here.

这篇关于如何创建具有透明背景色的material-ui对话框并更改其高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！