您可以从Dialog中删除onClose={closeModal}，而是通过您提供的链接将closeModal函数传递给示例中任何按钮的onClick处理程序：

<Dialog
  as="div"
  className="fixed inset-0 z-10 overflow-y-auto" // removed onClose
>

而是将其传递给对话框内的关闭按钮

<button onClick={handleClose}>Close</button>

在对话框UI的onClose函数中添加返回空对象。下面是我的代码：

<Dialog
    initialFocus={completeButtonRef}
    as='div'
    className='fixed inset-0 z-10 overflow-y-auto'
    onClose={() => {}}
    open={false}
  >

将pointer-events: none添加到对话框覆盖中。
这可以通过添加pointer-events-none类来完成
https://github.com/tailwindlabs/headlessui/issues/621#issuecomment-867161749

我在使用https://headlessui.dev/react/dialog ReactJS和Typescript时遇到了同样的问题
我修复了传递一个名为onClose的新属性（值：布尔值）：空;其中，我可以处理组件onClose={（）=〉{setIsOpen（false）}}之外的状态，也可以处理调用prop onClose={onClose}的对话框中的状态
第一部分

<Transition appear show={showModal} as={Fragment}>
        <Dialog
          as="div"
          className={clsx("fixed inset-0 z-50 overflow-y-auto", 
          className)}
          onClose={onClose}
        >

....
第2部分enter code here

<Modal
        {...args}
        showModal={isOpen}
        onClose={() => {setIsOpen(false) }}
      />

onClose={() => null }>

你也可以返回null，它阻止外部点击！

我只需要将onClose设置为null。添加static属性会使自定义关闭事件无法工作。

<Dialog
  static
  onClose={() => null}>
</Dialog>

在heandlessui更新1.16中，Overlay组件只出现在Dialog.Panel中，因此可以直接在Dialog中执行，以解释从Dialog.Panel中单击调用的onClose
结果如何：

<Dialog
                    as="div"
                    className="relative z-10"
                    onClose={() => {
                        if (event instanceof PointerEvent === false) {
                            closeModal()
                        }
                    }}
                >

将handleClose函数更改为：

const handleClose = (event, reason) => {
    if (reason !== "backdropClick") {
      setOpen(false)
    }
  }

您必须通过static。
在此page中查找static
然后，您将需要处理打开和关闭。