如何在 material ui 对话框组件上添加背景图片

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 添加图片，但我无法做到。任何人都可以帮我添加它吗？提前致谢:)

Answer 1

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

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

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

接下来，您可以利用 classes prop (the specific overrides made available for the Dialog component are detailed here 将此 class 应用于 Dialog：

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

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

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

export default withStyles(styles)(DialogWithBackgroundImage);

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

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

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

如何在 material ui 对话框组件上添加背景图片

How to add background image on a material ui Dialog component

css

background-image

reactjs

material-ui