在 chakra-ui 上為 Modal 創建變體樣式

Question

我想創建一個 Modal 變體並設置默認寬度和背景顏色（除其他外）。 我找不到確切說明如何操作的文檔，但我認為使用variants將是 go 的方法。

我在代碼沙箱上做了最好的嘗試： https://codesandbox.io/s/vigilant-germain-u3mkx ？

歡迎大家提出意見。

Answer 1

在 Modal 組件中添加 baseStyle 而不是變體

import {
  ChakraProvider,
  Modal,
  extendTheme,
  Button,
  useDisclosure,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalCloseButton,
  ModalBody
} from "@chakra-ui/react";
import "./styles.css";

const theme = extendTheme({
  components: {
    Modal: {
      baseStyle: (props) => ({
        dialog: {
          maxWidth: ["95%", "95%", "95%"],
          minWidth: "95%",
          bg: "#00ff00"
        }
      })
    }
  }
});

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

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

      <Modal isOpen={isOpen} onClose={onClose} variant="wide">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <p>Test</p>
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </ChakraProvider>
  );
}