-1

How to make the dialog, take the size of image. enter image description here

And changing the background-color to transparent is also not working

enter image description here

Arijit Kundu
  • 478
  • 4
  • 16
  • Don't use a dialog, just use an absolute position element: https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element. If you want to use the dialog, you'll have to override more than just the background. – Yatrix Aug 25 '20 at 12:48

1 Answers1

0

enter image description here

Achieved this by the following code!

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

This is overriding the react theme

export default {
  overrides: {
    MuiPaper: {
      elevation24: {
        boxShadow: "none"
      }
    }
  }
}
Arijit Kundu
  • 478
  • 4
  • 16