无法将使用 React Portal 和 Tailwind CSS 的 `@headlessui/react` 中的 `Dialog/Modal` 居中?

Posted

技术标签:

【中文标题】无法将使用 React Portal 和 Tailwind CSS 的 `@headlessui/react` 中的 `Dialog/Modal` 居中?【英文标题】:Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS? 【发布时间】:2021-06-10 04:35:29 【问题描述】:

我想让它像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

我想将它垂直和水平居中。我该怎么做?

【问题讨论】:

通过删除对话框中的className props,(&lt;Dialog open=isOpen onClose=setIsOpen as="div"&gt;),模态就像示例一样,但打开模态按钮仍然处于活动状态 @antoineso 通过删除 Dialog 中的 className 属性,它只出现在按钮下方(因为 DOM 中的所有内容都是从上到下布局的),这不是模态的工作方式。 modal 隐藏它下面的所有内容,仅关注 modal。这就是为什么我们需要这些课程。它不一样:) @antoineso 得到了答案并将其发布在下面:) 【参考方案1】:

我必须将 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

【讨论】:

我发现这个class names list for tailwind 可能对您未来的功能有所帮助。

以上是关于无法将使用 React Portal 和 Tailwind CSS 的 `@headlessui/react` 中的 `Dialog/Modal` 居中?的主要内容,如果未能解决你的问题,请参考以下文章

React Portal 案例学习

[react] 请说说react中Portal是什么?

javascript 旧版React Portal

React 16 的 Portal API 是否要取代 Context API?

Windows Azure Portal登录到门户网站并收到错误“我们无法将您登录到门户网站”

react-插槽(Portals)