css - 如何在 Material-UI 中使图像稍微偏离对话框

Question

我想在对话框上方显示仙人掌的一半，但如果我应用这些样式，仙人掌就会被剪掉。

有人可以告诉我我做错了什么吗？

这是仙人掌样式

cactus: {
  position: 'absolute',
  top: -20,
  left: 30,
  backgroundColor: '#fff',
  width: '60px',
  height: '60px',
},

顺便说一句，我正在使用 Material-UI 和 React。

完整代码-

import React, { useState } from 'react';
import {
  DialogTitle,
  Typography,
  IconButton,
  Divider,
  DialogContent,
  Button,
  Grid,
  TextField,
  Collapse,
  Avatar,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Dialog from './Dialog';
import { IoCloseSharp } from 'react-icons/io5';
import Cactus from '../../Assets/cactus.svg';

const CreateBatchDialog = ({ open, close }) => {
  const classes = useStyles();

  const [test, setTest] = useState(false);

  return (
    <Dialog open={open} onClose={close} maxWidth="sm">
      <Avatar className={classes.cactus}>
        <img src={Cactus} alt="cactus" height="50px" width="50px" />
      </Avatar>
      <DialogTitle>
        <div className={classes.header}>
          <Typography variant="h5">Join Batch</Typography>
        </div>
        <IconButton className={classes.close} onClick={close}>
          <IoCloseSharp />
        </IconButton>
      </DialogTitle>

      <Divider />

      <DialogContent className={classes.content}>
        <Grid spacing={2} container>
          <Grid item xs={10}>
            <TextField fullWidth variant="outlined" placeholder="Batch Name" />
          </Grid>
          <Grid item xs={2} className={classes.btnContainer}>
            <Button
              fullWidth
              variant="contained"
              className={classes.btn}
              onClick={() => setTest((prev) => !prev)}
            >
              Join
            </Button>
          </Grid>
        </Grid>

        <Collapse in={test} className={classes.error}>
          <Typography align="left">
            * Placeholder for any error messages
          </Typography>
        </Collapse>
      </DialogContent>
    </Dialog>
  );
};

const useStyles = makeStyles({
  header: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  close: {
    position: 'absolute',
    right: 10,
    top: 12,
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '30px',
  },
  actions: {
    padding: '20px',
  },
  btn: {
    padding: '12px 16px',
    borderRadius: 8,
    backgroundColor: 'rgba(24, 119, 242, 0.5)',

    '&:hover': {
      backgroundColor: 'rgba(24, 119, 242, 0.5)',
    },
  },
  btnContainer: {
    display: 'flex',
  },
  error: {
    width: '100%',
    margin: '20px 0px 0px 0px',
    color: 'crimson',
  },
  cactus: {
    position: 'absolute',
    top: 0,
    left: 30,
    backgroundColor: '#fff',
    width: '60px',
    height: '60px',
  },
});

export default CreateBatchDialog;

我已经尝试过一些解决方案，包括添加这一行

transform: 'translate(50%, -50%)',

但它也给出了与上图所示相同的结果。

Answer 1

您可以设置Paper 的CSS overflow属性设置为 visible 以便可以看到溢出的内容:

V5

<Dialog
  PaperProps={{
    sx: {
      overflow: "visible"
    },
  }}
>

V4

const useStyles = makeStyles({
  paper: {
    overflow: "visible"
  }
});

<Dialog
  PaperProps={{
    className: classes.paper
  }}
  open={open}
  onClose={handleClose}
>

现场演示