Css 如何使材质UI v1.0对话框背景透明？

我试图在对话框中放置一个循环进程。但对话框背景为白色，不能像早期版本-Material UI v0.2中那样设置为透明

style={{
    width: '200px',
    marginLeft: '40%',
    backgroundColor: 'transparent'
}}

我需要使对话框背景透明。以下是我的代码：

<Dialog
      bodyStyle={{margin: 0, padding: 0}}
      open={true}
      style={{
        width: '200px',
        marginLeft: '40%',
        backgroundColor: 'transparent'
      }}
      overlayStyle={{backgroundColor: 'transparent'}}
    >
      <CircularProgress
        style={{display: 'inline-block'}}
        size={50}
        color={"#00db49"}
      />
</Dialog>

以及如何删除对话框中的滚动条，如图所示？ 啊。。覆盖材质ui css始终是一个挑战

因为您不能使用样式和类直接覆盖材质ui嵌套div css。 因为dialog还继承了该背景覆盖的模态属性，这就是为什么您必须使用模态道具中列出的道具之一，并且对于此用例，您必须覆盖模态api文档中列出的背景道具

简单地说，把这个写进你的对话

// outside react class 
const styles = {
  root: {
    backgroundColor: "transparent"
  }
};

// In your react class 
<Dialog
  onClose={this.handleClose}
  aria-labelledby="simple-dialog-title"
  {...other}
  BackdropProps={{
  classes: {
    root: classes.root
    }
   }}
  >

//类外部
常量样式={
根目录：{
背景色：“透明”
}
};
//在你的课堂上

我附上了codesandbox中材质ui的工作示例。请参阅下文

确保使用withStyles（）包装组件，如下例所示

代码沙盒链接：

要隐藏滚动条，这里已经回答了这个问题：

---

如果您需要更多帮助，请告诉我

您可以使用对话框组件中的PaperProps属性覆盖纸张元素css属性。（从这里开始：）

例如：

    <Dialog
      onClose={this.handleClose}
      aria-labelledby="simple-dialog-title"
      {...other}
      BackdropProps={{
        classes: {
         root: classes.root
        }
       }
      }
      PaperProps ={{
        classes: {
         root: classes.paper
        }
      }}
      >
      <DialogTitle id="simple-dialog-title">Set backup 
 account
      </DialogTitle>
       // code you want is here   
    </Dialog>

---

希望这对您有所帮助，下面是一个工作示例：

我指的是对话框中除进度之外的滚动条。你能检查一下吗。（这可以在屏幕截图中看到）codesandbox示例对话框背景不透明？Hi@ShanikaEdiriweera我无法在code sandbox上复制此场景，如果您可以提供指向问题的链接，这将非常好。同时，您可以使用一些CSS删除对话框上的滚动条。请尝试一些{最小高度，溢出：隐藏，}在dialog的dialog根类上是的，它在这个链接中是透明的。你看不到更改吗？我想你还没有正确理解这个问题。我想让它透明的不是背景屏幕，而是对话框本身的背景。请看接受的答案。谢谢你的帮助。如何使根背景有一个trans稀疏覆盖？

const styles = {
  root: {
    backgroundColor: "transparent"
  },

  paper: {
    backgroundColor: "transparent",
    boxShadow: "none",
    overflow: "hidden"
  },
};