如何移除Material-UI框架中Dialog组件的背景阴影？

你要移除的阴影分两种常见场景，分别对应不同的配置方法：

• 场景1：移除Dialog弹窗自身的外围投影
  Material UI的Dialog内部默认使用Paper组件承载内容，阴影来自Paper的默认海拔属性，直接给Dialog加elevation={0}即可完全去掉自身阴影。
• 场景2：移除Dialog弹出后背后的半透明灰色背景遮罩
  通过BackdropProps自定义遮罩样式，将背景设置为透明即可隐藏背景遮罩。

修改后的代码示例如下，你可以根据自己的需求选择对应配置保留即可：

<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"
    {/* 移除弹窗自身阴影保留这行 */}
    elevation={0}
    {/* 移除背景遮罩保留下面这行 */}
    BackdropProps={{
      style: {
        backgroundColor: 'transparent'
      }
    }}
  >
    <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>

如果你习惯用样式类覆盖的方案，也可以在你定义的location_verify_dialog样式中添加boxShadow: none属性，效果和设置elevation={0}一致。

内容的提问来源于stack exchange，提问作者Zenixo