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道具将类应用于Dialog（Dialog组件可用的特定替代详细here）：

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

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

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

export default withStyles(styles)(DialogWithBackgroundImage);

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

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

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

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

1 个答案: