CODEWITHSUNDEEP
cssreactjsbackground-imagematerial-ui
Rehan Sattar
Rehan Sattar

Reputation: 4015

How to add background image on a material ui Dialog component

I'm using material-ui version 3.9.3 in my React application. I want to add a background image on a dialog. I'm using the Dialog component for it but I'm unable to add a background image on the whole dialog. For example:


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

I have tried to add an image using classes and custom CSS but I'm unable to do it. Can anyone help me out to add it? Thanks in advance :)

Upvotes: 3

Views: 9056

Answers (1)

Andrew Keller
Andrew Keller

Reputation: 3239

First, you can define the background image in a styles object that can be used with the withStyles higher-order component to apply it to the dialog:

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

When you pass this object to the withStyles HOC, it will supply your component with a classes prop containing properties with the same names as the properties on styles that you've defined.

Next, you can apply this class to the Dialog by taking advantage of the classes prop (the specific overrides made available for the Dialog component are detailed here): 

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

This is telling material-ui to merge the styles you have defined in styles.dialog with the default styles on the Paper element that is used with the Dialog.

You'll need to make sure that you're wrapping your component in the withStyles HoC. If you have a class component, it will look something like this:

export default withStyles(styles)(DialogWithBackgroundImage);

For functional components, it would look something like:

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

Here's a working example that ties everything together: https://codesandbox.io/embed/q3zy4r2np4

Upvotes: 5

Related Questions