如何去除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

有几个选项可以隐藏 Dialog 组件的背景阴影。

选项 1

您可以在makeStyles或useStyles中使用location_verify_dialogclass和selectpaperclass。

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

选项 2

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

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 link 两个选项。

Answer 2

Dialog 在后台使用 Paper 组件并提供 PaperProps 道具让您覆盖 Paper 属性，包括 elevation (设置 Paper 阴影）。

编辑：如果要删除Backdrop 背景色，可以使用Dialog 继承的hideBackdrop, it's a 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

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

hideBackdrop={true}

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

How to remove shadow in Material-UI Dialog?

user-interface

reactjs

material-design

material-ui

选项 1

选项 2

现场演示