如何创建具有透明背景颜色的 MUI 对话框？答案

【问题标题】：How to create MUI Dialog with transparent background color?如何创建具有透明背景颜色的 MUI 对话框？
【发布时间】：2017-04-30 17:04:25
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

对于最新版本 ("@material-ui/core": "^1.2.3")，它是如何完成的：

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

注意新的PaperProps 属性。它不在文档中，但如果您查看源代码，他们使用 PaperProps 作为您可以传入的道具之一 - 因为这不在文档中，但这可能会随着未来的版本而改变，所以在这里要小心.

【讨论】：

PaperProps 记录在 Dialog API 页面中：material-ui.com/api/dialog
对于 Modal，使用 BackdropProps 而不是 PaperProps，效果很好。

【解决方案2】：

在材料 v4 或最新版本中。可以使用BackdropProps，见online demo

【讨论】：

这对我有帮助，谢谢。它是适用于所有嵌套组件的语法方案：material-ui.com/guides/api/#nested-components 同样有效的是：BackdropProps={{invisible: true}}
这是现在最好的答案

【解决方案3】：

你可以在 Dialog 上设置 overlayStyle 属性来改变背景颜色，像这样：

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

【讨论】：

overlayStyle={{backgroundColor: 'transparent'}} 成功了...谢谢

【解决方案4】：

你可以直接使用CircularProgress和css属性，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 的不透明度和指定的背景覆盖整个屏幕。

【讨论】：

【解决方案5】：

像这样使用 bodyStyle 道具：

<Dialog
  bodyStyle={{margin:0, padding:0}}
  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>

【讨论】：

【解决方案6】：

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

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

JSX：

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

CSS：

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

【讨论】：

【解决方案7】：

您不必使用透明的Dialog，MUI 公开了Dialog 在幕后使用的Backdrop 组件。 Backdrop 让您可以将任何内容放入暗淡的图层中，而无需处理物理容器：

<Backdrop
  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
  open={open}
  onClick={handleClose}
>
  <Stack gap={1} justifyContent="center" alignItems="center">
    <CircularProgress color="inherit" />
    <Typography>Loading...</Typography>
  </Stack>
</Backdrop>

现场演示

【讨论】：