我想创建一个自定义星形对话框设计

Question

我想创建一个类似于附图的自定义对话框。我正在使用带有 React 和 Typescript 的 Material UI，但我也对带有自定义 CSS 的解决方案持开放态度。
现在我尝试了 CSS 属性 poligon 和明星设计，但还差得很远。
任何帮助将不胜感激。

Answer 1

这是一个 App.js 文件：

import React, { useState } from "react";
import CustomDialogfrom "./components/CustomDialog/CustomDialog";

function App() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

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

  const handleConfirm = () => {
    console.log("Confirmed");
    handleClose();
  };
  return (
    <main className="bg-gray-100 flex justify-center items-center h-screen ">
      <button onClick={handleOpen}>Open Dialog</button>
      <CustomDialog
        open={open}
        onClose={handleClose}
        title="Custom Dialog"
        onConfirm={handleConfirm}
      >
        This is a custom dialog content.
      </CustomDialog>
    </main>
  );
}
export default App;

这是一个 CustomDialog.js 文件：

import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
} from "@mui/material";
import { styled } from "@mui/system";

const StyledDialog = styled(Dialog)`
  .MuiPaper-root {
    border-radius: 15px;
    padding: 20px;
    position: relative;
    overflow: visible;
    background: #fff;
  }

  .MuiDialogTitle-root {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }

  .MuiDialogContent-root {
    text-align: center;
  }

  .MuiDialogActions-root {
    justify-content: center;
    padding: 10px 24px;
  }
`;

const CustomDialog = ({ open, onClose, title, children, onConfirm }) => {
  return (
    <StyledDialog open={open} onClose={onClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          Cancel
        </Button>
        <Button onClick={onConfirm} color="primary" variant="contained">
          Confirm
        </Button>
      </DialogActions>
    </StyledDialog>
  );
};

export default CustomDialog;