我想创建一个 Modal 变体并设置默认宽度和背景颜色(除其他外)。我找不到确切说明如何操作的文档,但我认为使用variants
将是要走的路。
我在代码沙箱上做了最好的尝试:https ://codesandbox.io/s/vigilant-germain-u3mkx ?
欢迎大家提出意见。
我想创建一个 Modal 变体并设置默认宽度和背景颜色(除其他外)。我找不到确切说明如何操作的文档,但我认为使用variants
将是要走的路。
我在代码沙箱上做了最好的尝试:https ://codesandbox.io/s/vigilant-germain-u3mkx ?
欢迎大家提出意见。
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>
);
}