CODEWITHSUNDEEP
cssreactjsmaterial-ui
Aakash Verma
Aakash Verma

Reputation: 3994

How to set css of different parts of a Material UI Dialog?

So this is a sample piece of code for Material Dialog 

  <Dialog
    open={this.props.open}
    onClose={this.props.closeAtParent}
    PaperProps={{
      style: {
        minHeight: '75vh',
        minWidth: '75vw',
      },
    }}
    aria-labelledby="open-dialog-title"
    aria-describedby="open-dialog-description"
  >
    <DialogTitle id="open-dialog-title">
      {this.props.dialogs[this.state.selected].title}
    </DialogTitle>
    <DialogContent>
      <DialogContentText id="open-dialog-description">
        {this.props.dialogs[this.state.selected].desc}
      </DialogContentText>
      {this.imageIfExists()}
    </DialogContent>
    <DialogActions>
      {this.populateButtons()}
    </DialogActions>
  </Dialog>

Now as you can see I was able to set the dialog width and height through PaperPros but I am unable to set other properties like backdrop color and DialogActions' button alignment.

There is no documentation or SO available for the same which is so sad. They mention classes and PaperProps but do not talk about them.

My questions therefore are,

Upvotes: 1

Views: 12793

Answers (2)

shiva
shiva

Reputation: 3941

Material-ui Dialog also inherits ModalComponent you can use the Props of Modal to change the Backdrop color

Modal API Description

Button in DialogActions are by default justified to flex-end. You can override this behaviour using classes property

const styles = {
  backdrop: {
    backgroundColor: blue[100],
    color: blue[600],
  },
  action:{
    justifyContent:'inherit',
  }
};

<Dialog
          BackdropProps={{
            classes: {
              root: classes.backdrop,
            }
          }}
          {...other}/>
      

<DialogActions
           className={classes.action}>

Upvotes: 3

Nadun
Nadun

Reputation: 7863

you can use Grid to align your content, in this case your buttons as described in here: https://material-ui.com/layout/grid/

you can use BackdropProps to change backdrop values. use: https://material-ui.com/api/dialog/

(it clearly says: The properties of the Modal component are also available. You can take advantage of this behavior to target nested components)

so the final outcome will be: 

<Dialog
 onClose={this.handleClose}
 {...other}
 BackdropProps={{
  classes: {
   root: classes.root
  }
 }}
 PaperProps={{
  style: {
    minHeight: "75vh",
    minWidth: "75vw"
  }
 }}
 aria-labelledby="open-dialog-title"
 aria-describedby="open-dialog-description"
 >
  <DialogTitle id="open-dialog-title">title</DialogTitle>
   <DialogContent>
    <DialogContentText id="open-dialog-description">
     content
    </DialogContentText>
   </DialogContent>
   <DialogActions>
    <Grid container justify="center">
      <Grid item>
        <Button variant="raised" color="primary">
         test
        </Button>
      </Grid>
    </Grid>
   </DialogActions>
 </Dialog>

here is a working example : https://codesandbox.io/s/10vxmwqy7

hope this will help you.

Upvotes: 2

Related Questions