Css 如何在材质ui对话框组件上添加背景图像

我正在React应用程序中使用

材质ui版本3.9.3

。我想在对话框中添加背景图像。我正在使用

对话框

组件，但无法在整个对话框中添加背景图像。 例如：

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

{/*一些jsx*/}
{儿童}

我曾尝试使用类和自定义CSS添加图像，但我无法做到这一点。

---

有人能帮我加上吗？提前感谢：）

首先，您可以在

样式

对象中定义背景图像，该对象可与高阶组件一起使用，以将其应用于对话框：

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

当您将此对象传递给

withStyles

HOC时，它将为您的组件提供一个

classes

prop，其中包含与您定义的

styles

上的属性同名的属性

接下来，您可以利用prop将此类应用于

对话框

（详细介绍了为

对话框

组件提供的特定覆盖）：

对于功能组件，它看起来像：

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

exportdefaultwithstyles（styles）（（{open，children，classes}）=>（））

下面是一个将所有内容联系在一起的工作示例：

export default withStyles(styles)(DialogWithBackgroundImage);

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