[英]Creating a variant style for Modal on chakra-ui
I want to create a Modal variant with and set the default width and background color (among other things).我想创建一个 Modal 变体并设置默认宽度和背景颜色(除其他外)。 I can't find documentation that says exactly how to do it, but I figured using
variants
would be the way to go.我找不到确切说明如何操作的文档,但我认为使用
variants
将是 go 的方法。
I've put my best attempt on Code Sandbox here: https://codesandbox.io/s/vigilant-germain-u3mkx ?我在代码沙箱上做了最好的尝试: https://codesandbox.io/s/vigilant-germain-u3mkx ?
Any suggestions would be welcome.欢迎大家提出意见。
Add baseStyle in the Modal component instead of variants在 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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.