Creating a variant style for Modal on chakra-ui

Question

I want to create a Modal variant with and set the default width and background color (among other things). I can't find documentation that says exactly how to do it, but I figured using variants would be the way to go.

I've put my best attempt on Code Sandbox here: https://codesandbox.io/s/vigilant-germain-u3mkx ?

Any suggestions would be welcome.

Answer 1

Add baseStyle in the Modal component instead of variants

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