材质 UI 对话框阴影去除

Question

我目前正在使用材质 UI 对话框来显示有关位置标记的一些信息。我想禁用组件周围的丑陋盒子阴影。我设置了box-shadow: none 并尝试了多种解决方案，但它们似乎都不起作用！

截图

这是我的这个组件的代码

const useStyles = makeStyles({
  root: {
    maxWidth: '400px',
    marginLeft: '5px',
    width: '446px',
    height: '200px',
    marginTop: '50px',
    overflow: 'hidden',
    boxShadow: 'none',
  },
  closeButton: {
    color: Colours.Black,
    float: 'right',
    paddingTop: '15px',
    marginRight: '5px',
    marginLeft: 'auto',
    height: '24px',
    width: '24px',
  },
  flexContainerContent: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingRight: '10px',
  },
  flexContainerButtons: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '0px 18px 15px 18px',
  },
});

const InfoWindow = ({
  title,
  address,
  open,
  handleClose,
}: {
  title: string;
  address: string;
  open: boolean;
  handleClose: () => void;
}) => {
  const infoStyles = useStyles();

  return (
    <Dialog
      classes={{ root: infoStyles.root }}
      open={open}
      onClose={handleClose}
      hideBackdrop
      disableEnforceFocus
    >
      <Container classes={{ root: infoStyles.flexContainerContent }}>
        <DialogContent style={{ overflow: 'hidden', paddingLeft: '0px', boxShadow: 'none' }}>
          <Typography variant="body1" color="textSecondary">
            Name:
            <span
              style={{ display: 'inline', color: Colours.Black }}
              color="textPrimary"
            >
              {` ${title} `}
            </span>
          </Typography>
          <Typography variant="body1" color="textSecondary">
            Location:
            <span
              style={{ display: 'inline', color: Colours.Black }}
              color="textPrimary"
            >
              {` ${address} `}
            </span>
          </Typography>
        </DialogContent>
        <CloseIcon
          onClick={handleClose}
          classes={{ root: infoStyles.closeButton }}
        />
      </Container>
      <DialogActions style={{ padding: '0px', boxShadow: 'none' }}>
        <Container classes={{ root: infoStyles.flexContainerButtons }}>
          <Button size="small" style={{ color: Colours.Danger }}>
            Delete
          </Button>
          <Button size="small" style={{ color: Colours.Secondary }}>
            Edit
          </Button>
        </Container>
      </DialogActions>
    </Dialog>
  );
};

export default InfoWindow;

非常感谢任何形式的帮助或建议！

Answer 1

您需要在对话框内定位纸张。 一种方法是添加这个 CSS 规则：

.MuiDialog-container .MuiPaper-root {
    box-shadow: none;
}