如何在 Material UI 对话框 Header 右上角添加关闭图标

Question

想在 header 部分右上角添加关闭图标。请帮助我。我使用了 Material UI 对话框。一切正常，但我想要顶部的关闭按钮。请看附图。

Answer 1

将图像图标放在标题中，并使用 css 正确定位，试试这个：

在关闭图片上应用此 css：

let closeImg = {cursor:'pointer', float:'right', marginTop: '5px', width: '20px'};

<Dialog
    modal={false}
    open={true}
    title={
            <div>
                ABC 
                <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style={closeImg}/>
            </div>
        }
>
    Hello
</Dialog>

检查工作fiddle：https://jsfiddle.net/ve0qbgLr/

Answer 2

我知道在 Material UI V1 之前有人问过这个问题，但接受的答案适用于 Material UI 版本 0（或他们称之为的任何东西）。

对于需要版本 1 帮助的人，MUI 人员公开了一个 <DialogTitle /> 组件，该组件接受 disableTypography 以便您可以自定义对话框。

EG

<Dialog open={this.state.show} onClose={this.onClose}>
    <DialogTitle disableTypography className={styles.dialogTitle}>
        <h2>Dialog...</h2>
        <IconButton onClick={this.onClose}>
            <CloseIcon />
        </IconButton>
    </DialogTitle>
    <DialogContent>
        <span>Dialog Content</span>
    </DialogContent>
</Dialog>

我只是在 h2 和图标

之间使用带有 space 的 flex

.dialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

希望对您有所帮助。 :-)

Answer 3

对于使用 Material UI V4.

寻找解决方案的任何人

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

 <DialogTitle id="id">
         <Box display="flex" alignItems="center">
                <Box flexGrow={1} >{title}</Box>
                <Box>
                    <IconButton onClick={onClose}>
                          <CloseIcon />
                    </IconButton>
                </Box>
          </Box>
  </DialogTitle>

Answer 4

我想你也可以使用 Grid（参见教程 here）。

类似

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

<DialogTitle>
  <Grid container direction="row" justify="space-between" alignItems="center">
    {myTitle}
    <IconButton aria-label="close" onClick={closeDialog}>
      <CloseIcon />
    </IconButton>
  </Grid>
</DialogTitle>

Answer 5

我知道这是一个老问题，但我发现它是因为我遇到了同样的问题。所以对于像我这样的人 Material-UI's Dialog-Demo 列出了一个 example 和一个关闭按钮：

import React from 'react';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';

const styles = (theme: Theme) =>
  createStyles({
    root: {
      margin: 0,
      padding: theme.spacing(2),
    },
    closeButton: {
      position: 'absolute',
      right: theme.spacing(1),
      top: theme.spacing(1),
      color: theme.palette.grey[500],
    },
  });

export interface DialogTitleProps extends WithStyles<typeof styles> {
  id: string;
  children: React.ReactNode;
  onClose: () => void;
}

const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

const DialogContent = withStyles((theme: Theme) => ({
  root: {
    padding: theme.spacing(2),
  },
}))(MuiDialogContent);

const DialogActions = withStyles((theme: Theme) => ({
  root: {
    margin: 0,
    padding: theme.spacing(1),
  },
}))(MuiDialogActions);

export default function CustomizedDialogs() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open dialog
      </Button>
      <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Modal title
        </DialogTitle>
        <DialogContent dividers>
          <Typography gutterBottom>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          </Typography>
          <Typography gutterBottom>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
            lacus vel augue laoreet rutrum faucibus dolor auctor.
          </Typography>
          <Typography gutterBottom>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
            auctor fringilla.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleClose} color="primary">
            Save changes
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 6

[来自 MUI 文档：自定义对话框][1]

使用 sx 属性

import mui components as needed

...

return (
    <Dialog
        className='modal-dialog'
        open={isModalOpen}
        onClose={onClose}
    >
        <DialogTitle sx={{m: 0, p: 2}}>
            <IconButton
                aria-label="close"
                onClick={onClose}
                sx={{
                    position: 'absolute',
                    right: 8,
                    top: 8,
                    color: (theme) => theme.palette.grey[500],
                }}
            >
                <CloseIcon/>
            </IconButton>
        </DialogTitle>
        <DialogContent>
            <DialogContentText>
                Your dialog content here
            </DialogContentText>
        </DialogContent>
    </Dialog>
);


  [1]: https://mui.com/components/dialogs/#customized-dialogs

如何在 Material UI 对话框 Header 右上角添加关闭图标

How to add close icon in Material UI Dialog Header top right corner

reactjs

material-ui