score:0

Accepted answer
import React from "react";
import { Modal as MUIModal, Box, makeStyles } from "@material-ui/core";

interface ModalProps {
  width: number;
  height: number;
  children: React.ReactNode;
  open: boolean;
}

const useStyles = ({ height, width }: Partial<ModalProps>) => makeStyles({
  root: {
    height: `${height}px`,
    width: `${width}px`,
    margin: "auto",
    borderRadius: 12,
  },
  box: {
    height: `${height}px`,
    width: `${width}px`,
    background: "#FFFFFF",
    borderRadius: 12,
    outline: 0,
  }
});

export function Modal({ width, height, children, open }: ModalProps) {
  const classes = useStyles({ width, height })()
  return (
    <MUIModal className={classes.root} open={open}>
      <Box className={classes.box}>{children}</Box>
    </MUIModal>
  );
}

Related Query

More Query from same tag