如何在Material UI Dialog组件上添加背景图像

Question

我在我的React应用程序中使用了material-ui version 3.9.3。我想在对话框上添加背景图像。我正在使用Dialog组件，但无法在整个对话框上添加背景图像。 例如：

    <Dialog
       fullScreen={fullScreen}
        open={this.props.open}
        onClose={this.handleClose}
        aria-labelledby='responsive-dialog-title'
        >
        <DialogTitle
          id='customized-dialog-title'
          onClose={this.handleClose}
          noCloseButtonNeeded={noCloseButtonNeeded}
        >
          {/* some jsx */}
         </DialogTitle>
        <DialogContent>
          {children}
        </DialogContent>
      </Dialog>

我尝试使用类和自定义CSS添加图像，但是我无法实现。有人可以帮助我添加吗？谢谢您的帮助 :)

- Rehan Sattar

Answer 1

首先，您可以在 styles 对象中定义背景图像，并将其与 withStyles 高阶组件一起使用，将其应用于对话框：

const styles = {
  dialog: {
    backgroundImage: "url(https://i.imgur.com/HeGEEbu.jpg)"
  }
};

当您将此对象传递给 withStyles 高阶组件时，它会向您的组件提供一个名为 classes 的属性，其中包含与您定义在 styles 上相同名称的属性。

接下来，您可以利用 classes 属性（有关 Dialog 组件提供的特定覆盖的详细信息，请参见 此处），将此类应用于 Dialog。

<Dialog ... classes={{paper: classes.dialog}}>
        {/* ... */}
</Dialog>

这段话告诉Material-UI将你在styles.dialog中定义的样式与在对话框中使用的Paper元素的默认样式合并。

你需要确保将组件包装在withStyles高阶组件中。如果你有一个类组件，代码大概是这样的：

export default withStyles(styles)(DialogWithBackgroundImage);

对于函数组件，它将会像这样：

export default withStyles(styles)(({open, children, classes}) => (<Dialog ...></Dialog>))

这里有一个完整的工作示例，将所有内容联系在一起：https://codesandbox.io/embed/q3zy4r2np4

- Andrew Keller