为chakra-ui上的Modal创建变体样式

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

// theme.js
import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Modal: {
      // 定义全局样式
      baseStyle: {
        dialog: {
          borderRadius: "md",
          boxShadow: "lg",
        },
      },
      // 定义变体样式
      variants: {
        customVariant: {
          dialog: {
            bg: "teal.500",
            color: "white",
            borderRadius: "xl",
            boxShadow: "2xl",
          },
          header: {
            bg: "teal.600",
            color: "white",
          },
          footer: {
            bg: "teal.600",
            color: "white",
          },
        },
      },
    },
  },
});

export default theme;

// index.js 或 App.js
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";
import theme from "./theme";

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

// App.js
import React from "react";
import {
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
} from "@chakra-ui/react";

function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <div>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={onClose} variant="customVariant">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Custom Modal</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            This is a custom modal with a teal background and white text.
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="teal" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </div>
  );
}

export default App;