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

Question

我material-ui version 3.9.3在我的 React 应用程序中使用。我想在对话框上添加背景图像。我正在使用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 添加图像，但我无法做到这一点。谁能帮我添加一下吗？提前致谢 ：）

Answer 1

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

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

当您将此对象传递给withStylesHOC 时，它将为您的组件提供一个prop，其中包含与您定义的classes属性同名的属性。styles

接下来，您可以利用 classes 属性将此类应用于Dialog（此处详细Dialog介绍了可用于该组件的特定覆盖）：

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

这告诉material-ui 将您定义的样式与对话框中使用的元素styles.dialog上的默认样式合并。Paper

您需要确保将组件包装在withStylesHoC 中。如果您有一个类组件，它将看起来像这样：

export default withStyles(styles)(DialogWithBackgroundImage);

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

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

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