Question

这是“材质对话框”的示例代码

  <Dialog
    open={this.props.open}
    onClose={this.props.closeAtParent}
    PaperProps={{
      style: {
        minHeight: '75vh',
        minWidth: '75vw',
      },
    }}
    aria-labelledby="open-dialog-title"
    aria-describedby="open-dialog-description"
  >
    <DialogTitle id="open-dialog-title">
      {this.props.dialogs[this.state.selected].title}
    </DialogTitle>
    <DialogContent>
      <DialogContentText id="open-dialog-description">
        {this.props.dialogs[this.state.selected].desc}
      </DialogContentText>
      {this.imageIfExists()}
    </DialogContent>
    <DialogActions>
      {this.populateButtons()}
    </DialogActions>
  </Dialog>

现在您可以看到，我可以通过PaperPros设置对话框的宽度和高度，但是我无法设置其他属性，例如背景色和DialogActions的按钮对齐方式。

没有文档或SO可供使用，这太可悲了。他们提到classes和PaperProps，但不谈论它们。

因此，我的问题是

如何将默认情况下对齐在右侧的按钮居中？
此外，如何更改最初是灰色的背景色？

Answer 1

Material-ui Dialog还继承了Modal组件，您可以使用Modal的Props来更改背景色

Modal API Description

默认情况下，DialogActions中的

Button被对齐为flex-end。您可以使用classes属性覆盖此行为

const styles = {
  backdrop: {
    backgroundColor: blue[100],
    color: blue[600],
  },
  action:{
    justifyContent:'inherit',
  }
};

<Dialog
          BackdropProps={{
            classes: {
              root: classes.backdrop,
            }
          }}
          {...other}/>

<DialogActions
           className={classes.action}>

Sandbox Demo

Answer 2

您可以使用Grid来对齐内容，在这种情况下，您的按钮如此处所述：https://material-ui.com/layout/grid/

您可以使用 BackdropProps 更改背景值。使用：https://material-ui.com/api/dialog/

（它清楚地表明：Modal组件的属性也可用。您可以利用此行为来定位嵌套组件）

所以最终结果将是：

<Dialog
 onClose={this.handleClose}
 {...other}
 BackdropProps={{
  classes: {
   root: classes.root
  }
 }}
 PaperProps={{
  style: {
    minHeight: "75vh",
    minWidth: "75vw"
  }
 }}
 aria-labelledby="open-dialog-title"
 aria-describedby="open-dialog-description"
 >
  <DialogTitle id="open-dialog-title">title</DialogTitle>
   <DialogContent>
    <DialogContentText id="open-dialog-description">
     content
    </DialogContentText>
   </DialogContent>
   <DialogActions>
    <Grid container justify="center">
      <Grid item>
        <Button variant="raised" color="primary">
         test
        </Button>
      </Grid>
    </Grid>
   </DialogActions>
 </Dialog>

这是一个有效的示例：https://codesandbox.io/s/10vxmwqy7

希望这会对您有所帮助。

如何设置“材质UI”对话框不同部分的CSS？

2 个答案: