无法将使用 React Portal 和 Tailwind CSS 的“@headlessui/react”中的“Dialog/Modal”居中？

Question

我想让它像https://tailwindui.com/components/application-ui/overlays/modals上的第一个模式一样居中

\n

我在下面的模态上复制了相同的类，但无法将其垂直居中。课程是完全相同的。

\n

这是 React Portal 的问题吗？

\n

模态.tsx

\n

import * as React from "react"\nimport { Dialog } from "@headlessui/react"\n\ntype ModalProps = {\n    isOpen: boolean\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const Modal = ({ isOpen, setIsOpen }: ModalProps) => {\n    return (\n        <Dialog\n            open={isOpen}\n            onClose={setIsOpen}\n            as="div"\n            className="fixed inset-0 z-10 overflow-y-auto"\n        >\n            <div className="flex flex-col bg-gray-800 text-white w-96 mx-auto py-8 px-4 text-center">\n                <Dialog.Overlay />\n\n                <Dialog.Title className="text-red-500 text-3xl">\n                    Deactivate account\n                </Dialog.Title>\n                <Dialog.Description className="text-xl m-2">\n                    This will permanently deactivate your account\n                </Dialog.Description>\n\n                <p className="text-md m-4">\n                    Are you sure you want to deactivate your account? All of your data\n                    will be permanently removed. This action cannot be undone.\n                </p>\n\n                <button\n                    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"\n                    onClick={() => setIsOpen(false)}\n                >\n                    Deactivate\n                </button>\n                <button\n                    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"\n                    onClick={() => setIsOpen(false)}\n                >\n                    Cancel\n                </button>\n            </div>\n        </Dialog>\n    )\n}\n

\n

Codesandbox \xe2\x86\x92 https://codesandbox.io/s/headless-ui-dialog-1gd8e

\n

我想将其垂直和水平居中。我该怎么做？

\n

Answer 1

我必须添加flex justify-center items-center到父级并mx-auto从子级中删除课程。

\n

import * as React from "react"\nimport { Dialog } from "@headlessui/react"\nimport clsx from "clsx"\n\ntype ModalProps = {\n    isOpen: boolean\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport const Modal = ({ isOpen, setIsOpen }: ModalProps) => {\n    return (\n        <Dialog\n            open={isOpen}\n            onClose={setIsOpen}\n            as="div"\n            className={clsx(\n                "fixed inset-0 z-10 overflow-y-auto flex justify-center items-center",\n                {\n                    "bg-gray-900": isOpen === true,\n                },\n            )}\n        >\n            <div className="flex flex-col bg-gray-800 text-white w-96 py-8 px-4 text-center">\n                <Dialog.Overlay />\n\n                <Dialog.Title className="text-red-500 text-3xl">\n                    Deactivate account\n                </Dialog.Title>\n                <Dialog.Description className="text-xl m-2">\n                    This will permanently deactivate your account\n                </Dialog.Description>\n\n                <p className="text-md m-4">\n                    Are you sure you want to deactivate your account? All of your data\n                    will be permanently removed. This action cannot be undone.\n                </p>\n\n                <button\n                    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"\n                    onClick={() => setIsOpen(false)}\n                >\n                    Deactivate\n                </button>\n                <button\n                    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"\n                    onClick={() => setIsOpen(false)}\n                >\n                    Cancel\n                </button>\n            </div>\n        </Dialog>\n    )\n}\n

\n

现在看起来很完美 \xe2\x86\x92 https://codesandbox.io/s/headless-ui-dialog-1gd8e

\n