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