如何让Material-UI的对话框变成图片的形状答案

【问题标题】：How to make the dialog of Material-UI take the shape of an image如何让Material-UI的对话框变成图片的形状
【发布时间】：2020-08-25 12:42:09
【问题描述】：

如何制作对话框，取图片大小。

并且将背景颜色更改为透明也不起作用

【问题讨论】：

不要使用对话框，只使用绝对位置元素：stackoverflow.com/questions/8508275/…。如果你想使用对话框，你必须覆盖的不仅仅是背景。

标签： html css reactjs dialog material-ui

【解决方案1】：

通过以下代码实现！

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  paper: {
    backgroundColor: "transparent",
  }
});

function Counselling() {
  const classes = useStyles();

  return (
    <div style={{ position: "absolute", top: "455px", left: "20px" }}>
      <Button variant="outlined" color="secondary" onClick={handleClickOpen}>
        Free Counselling
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        maxWidth="md"
        style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
        classes={{
          paper: classes.paper
        }}
      >
}

这是覆盖 react 主题

export default {
  overrides: {
    MuiPaper: {
      elevation24: {
        boxShadow: "none"
      }
    }
  }
}

【讨论】：