如何解决无法将使用 React Portal 和 Tailwind CSS 的“@headlessui/react”中的“Dialog/Modal”居中? Modal.tsx
我想让它像 https://tailwindui.com/components/application-ui/overlays/modals 上的第一个模态一样居中
我在下面的 Modal 上复制了相同的类,但我无法将其垂直居中。课程完全相同。
这是 React Portal 的问题吗?
Modal.tsx
import * as React from "react"
import { Dialog } from "@headlessui/react"
type ModalProps = {
isOpen: boolean
setIsOpen: React.dispatch<React.SetStateAction<boolean>>
}
export const Modal = ({ isOpen,setIsOpen }: ModalProps) => {
return (
<Dialog
open={isOpen}
onClose={setIsOpen}
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
>
<div className="flex flex-col bg-gray-800 text-white w-96 mx-auto py-8 px-4 text-center">
<Dialog.Overlay />
<Dialog.Title className="text-red-500 text-3xl">
Deactivate account
</Dialog.Title>
<Dialog.Description className="text-xl m-2">
This will permanently deactivate your account
</Dialog.Description>
<p className="text-md m-4">
Are you sure you want to deactivate your account? All of your data
will be permanently removed. This action cannot be undone.
</p>
<button
className="w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Deactivate
</button>
<button
className="m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Cancel
</button>
</div>
</Dialog>
)
}
代码沙盒 → https://codesandbox.io/s/headless-ui-dialog-1gd8e
我想垂直和水平居中。我该怎么做?
解决方法
我必须将 flex justify-center items-center
添加到父级并从子级中删除 mx-auto
类。
import * as React from "react"
import { Dialog } from "@headlessui/react"
import clsx from "clsx"
type ModalProps = {
isOpen: boolean
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}
export const Modal = ({ isOpen,setIsOpen }: ModalProps) => {
return (
<Dialog
open={isOpen}
onClose={setIsOpen}
as="div"
className={clsx(
"fixed inset-0 z-10 overflow-y-auto flex justify-center items-center",{
"bg-gray-900": isOpen === true,},)}
>
<div className="flex flex-col bg-gray-800 text-white w-96 py-8 px-4 text-center">
<Dialog.Overlay />
<Dialog.Title className="text-red-500 text-3xl">
Deactivate account
</Dialog.Title>
<Dialog.Description className="text-xl m-2">
This will permanently deactivate your account
</Dialog.Description>
<p className="text-md m-4">
Are you sure you want to deactivate your account? All of your data
will be permanently removed. This action cannot be undone.
</p>
<button
className="w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Deactivate
</button>
<button
className="m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Cancel
</button>
</div>
</Dialog>
)
}
现在看起来很完美 → https://codesandbox.io/s/headless-ui-dialog-1gd8e
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。