如何使Material UI v1.0对话框背景透明？

Question

我试图使CircularProgress放在对话框中。但是对话框背景为白色，并且不能像早期版本一样设置为透明-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>

以及如何如图所示在对话框中删除滚动条？

Answer 1

您可以使用Dialog组件中的PaperProps属性覆盖Paper元素的css属性。（从这里：https : //material-ui.com/api/dialog/）

举个例子 ：

    <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>

和纸张样式应按以下方式提供：

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

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

希望这会对您有所帮助，这是一个有效的示例：https : //codesandbox.io/s/j3wmyv7w2w

Answer 2

啊.. 覆盖材料 ui css 总是一个挑战

因为您不能使用样式和类直接覆盖 material-ui 嵌套的 div css。因为对话框还继承了该背景覆盖的MODAL属性，这就是为什么您必须使用 Modal props 中列出的道具之一，对于这个用例，您必须覆盖Modal api docs 中列出的Backdrop道具。

简单来说，只需将其写入您的对话框中

// 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
    }
   }}
  >

我在codeandbox中附上了材料ui的工作示例。请参考以下

确保使用 withStyles() 包裹您的组件，如下例所示

CodeSandBox 链接：https ://codesandbox.io/s/5xp76wn3xp

要隐藏滚动条，这里已经回答了：隐藏滚动条，但仍然能够滚动

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