Диалог Material-UI Как разместить кнопку закрытия в верхней правой границе диалога

Question

Хотите добавить значок закрытия в верхнем правом углу раздела заголовка.

Пожалуйста, помогите мне с этим. Я использовал диалоговое окно Material UI. все работает нормально, но я хочу закрыть кнопку в верхней части.

Answer 1

Некоторые замечания:

• position: 'absolute', чтобы можно было регулировать положение close button.

• overflowY: 'unset', чтобы разрешить переполнение за пределами диалогового окна путем переопределения соответствующих элементов стиля paper.

• Использовать MUI IconButton с icon CloseIcon для пользовательского интерфейса по требованию.

• Используйте крючки стиля MUI makeStyles для настройки стилей.

---

См.

• MUI Диалог CSS API : бумага

• MUI решение стилей : makeStyles

---

Пример кода:

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>

---

Онлайн-демонстрация:

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