CODEWITHSUNDEEP
reactjsuser-interfacematerial-uimaterial-design
Zenixo
Zenixo

Reputation: 877

How to remove shadow in Material-UI Dialog?

I need to remove the background shadow in the Material-UI dialog. But I can't find the way from API. Anyone can help me with that.

enter image description here

I need to remove this shadow...

<div id={"Location_Massage"} style={{ height: "10px !important" }}>
  <Dialog
    className={classes.location_verify_dialog}
    fullScreen={fullScreen}
    open={open}
    style={{
      marginTop: -470,
      marginLeft: 460
    }}
    onClose={handleClose}
    aria-labelledby="responsive-dialog-title"
  >
    <DialogContent>
      <DialogContentText
        style={{
          borderRadius: 12,
          height: "10px !important",
          width: 170
        }}
      >
        <div style={{ fontSize: 15, fontWeight: 700 }}>Me Labs</div>
      </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button
        style={{ borderRadius: 15, left: -6, top: -15 }}
        onClick={handleClose}
        color="primary"
        variant={"outlined"}
      >
        Cancel
      </Button>
      <Button
        style={{ borderRadius: 15, left: -4, top: -15 }}
        onClick={handleClose}
        color="primary"
        variant={"contained"}
      >
        Submit
      </Button>
    </DialogActions>
  </Dialog>
</div>

Upvotes: 3

Views: 6057

Answers (3)

NearHuscarl
NearHuscarl

Reputation: 81823

Dialog uses Paper component under-the-hood and provides a PaperProps prop to let you override the Paper properties including the elevation (which sets the Paper shadow).

EDIT: If you want to remove the Backdrop background color, you can use hideBackdrop, it's a Modal prop which the Dialog inherits from. But you should add some kind of border to be able to see the Dialog on the white background:

V5

<Dialog
  open={open}
  onClose={handleClose}
  hideBackdrop
  PaperProps={{
    elevation: 0,
    sx: {
      border: "solid 1px gray"
    }
  }}
>

V4

const useStyles = makeStyles({
  paper: {
    border: "solid 1px gray"
  }
);

<Dialog
  open={open}
  onClose={handleClose}
  hideBackdrop
  PaperProps={{
    elevation: 0,
    className: classes.paper
  }}
>

Live Demo

Codesandbox Demo

Upvotes: 2

Zenixo
Zenixo

Reputation: 877

I found the answer to my own question. if you need to remove background from dialog just add these props.

hideBackdrop={true}

Upvotes: 6

Junaid Faryad
Junaid Faryad

Reputation: 1707

There are a couple of options, using which you can hide the background shadow of the Dialog component.

Option 1

You can use the location_verify_dialog class and select the paper class in the makeStyles or useStyles.

location_verify_dialog: {
  "& .MuiDialog-paper": {
    boxShadow: "none"
  }
},

Option 2

You can assign a new class to the paper key in the classes object for the Dialog component and remove the background shadow.

paper: {
  boxShadow: "none"
}

Dialog component

<Dialog
    className={classes.location_verify_dialog}
    fullScreen={false}
    open={open}
    style={{
      marginTop: -470,
      marginLeft: 460,
      boxShadow: "none"
    }}
    onClose={handleClose}
    aria-labelledby="responsive-dialog-title"
    classes={{ paper: classes.paper }} // this is the class prop
  >

Here is the sandbox link with both of the options.

Upvotes: 0

Related Questions