如何去除 Material-UI 对话框中的阴影？

Question

我需要移除 Material-UI 对话框中的背景阴影。但我无法从 API 中找到方法。任何人都可以帮助我。

我需要移除这个阴影...

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

Answer 1

我找到了自己问题的答案。 如果您需要从对话框中删除背景，只需添加这些道具。

hideBackdrop={true}

Answer 2

Dialog 在底层使用Paper 组件并提供PaperProps 属性，让您覆盖Paper 属性，包括elevation（设置Paper 阴影）。

编辑：如果要删除Backdrop 背景颜色，可以使用hideBackdrop，它是Dialog 继承自的Modal prop。但是您应该添加某种边框才能在白色背景上看到Dialog：

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

现场演示

Answer 3

有几个选项，您可以使用它们隐藏Dialog 组件的背景阴影。

选项 1

您可以使用location_verify_dialog 类并在makeStyles 或useStyles 中选择paper 类。

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

选项 2

您可以为Dialog 组件的classes 对象中的paper 键分配一个新类并移除背景阴影。

paper: {
  boxShadow: "none"
}

对话框组件

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

这是包含两个选项的sandbox 链接。