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

Question

我想用创建一个Modal变体，并设置默认的宽度和背景颜色(以及其他东西)。我找不到确切说明如何做到这一点的文档，但我认为使用variants将是可行的方法。

我已经在代码沙盒上做了最好的尝试：https://codesandbox.io/s/vigilant-germain-u3mkx

任何建议都将受到欢迎。

Answer 1

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>
  );
}