如何使用透明背景颜色创建material-ui对话框并更改其高度？

Question

我正在尝试使用材料ui创建加载状态指示器.但我想要对话框的背景颜色,none也想调整高度.但我无法通过他们提供的样式选项来做到这一点.有解决方案吗 现在它看起来像.. 代码看起来像这样:

<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作为您可以传递的道具之一 - 因为这不在文档中,但这可能会随着未来版本而改变,所以在这里要小心.

Answer 2

在材料 v4 或最新版本中。可以使用BackdropProps，看在线演示

Answer 3

您可以在Dialog上设置overlayStyle prop以更改背景颜色,如下所示:

 <Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  overlayStyle={{backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
  >

Answer 4

您可以直接使用CircularProgresscss 属性，zIndex并且opacity尝试以下操作：

<CircularProgress size={2} style={Styles.mainLoader}/>

mainLoader: { 
    position: 'absolute',
    paddingTop: '15%',      
    width: '100%',
    height: '100%',
    zIndex: 1000,
    backgroundColor: '#000000',
    opacity: 0.5,
    textAlign: 'center',
}

它将以 0.5 的不透明度和指定的背景覆盖整个屏幕。

Answer 5

您可以直接使用该组件CircularProgress（而不是使用以下方法构建加载指示器Dialog：http://www.material-ui.com/#/components/circular-progress

您可以将加载指示器放置在div页面中间的 a 中：

JSX：

<div className="my-spinner">
    <CircularProgress size={59.5} />
</div>

CSS：

.my-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-
}