javascript - 在 chakra-ui 上为 Modal 创建变体样式
问题描述
我想创建一个 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>
);
}
推荐阅读
- c# - 使用随机根元素反序列化 JSON 数组时遇到问题
- reactjs - 如何在 react-datetime 中禁用键盘
- spring - 尽管 MacOS Big Sur 上有端口映射,但无法访问 docker 容器网页
- ios - 在 Swift 中转换 ISO 日期
- swiftui - SwiftUI:如何隐藏列表滚动条?
- python - 熊猫合并具有不同时间戳的数据帧一
- javascript - CheckBox 不存储它被选中的状态
- ruby-on-rails - 需要帮助重写一些最初用名为 Squeel 的 gem 编写的 Rails DB 查询,有工作的 SQL
- spring - 覆盖spring kakfka版本
- typescript - 当 noUncheckedIndexedAccess 为真时,按长度缩小数组类型的类型安全方法