Material-UI Dialog How to place the close button on the top right border of the dialog

Question

Want to add a close icon in the header section top right corner.

Please help me with this. I have used the Material UI Dialog. everything is working fine but I want a close button on the top section.

Answer 1

Some notice points:

• position: 'absolute' to enable adjusting the close button's position.

• overflowY: 'unset' to enable overflow outer the dialog by overriding the related style props paper.

• Use MUI IconButton with the icon CloseIcon for the demand UI.

• Use MUI makeStyles style hooks to customize the styles.

---

Refer:

• MUI Dialog CSS API: paper

• MUI styles solution: makeStyles

---

Sample code:

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

const useStyles = makeStyles(theme => ({
  paper: {
    overflowY: 'unset',
  },
  customizedButton: {
    position: 'absolute',
    left: '95%',
    top: '-9%',
    backgroundColor: 'lightgray',
    color: 'gray',
  }
}));

import CloseIcon from '@material-ui/icons/Close';
import { IconButton } from '@material-ui/core';

<Dialog
  classes={{paper: classes.paper}}
>
  <DialogActions>
    <IconButton className={classes.customizedButton}>
      <CloseIcon />
    </IconButton>
    ...
  </DialogActions>
</Dialog>

---

Online demo:

https://stackblitz.com/edit/mz5jx2?file=demo.js