如何隐藏shadcn/ui对话框顶部关闭按钮并保留ESC关闭功能？

方法1：直接移除默认关闭按钮组件 #

shadcn/ui对话框的右上角关闭按钮由<Dialog.Close>组件实现，直接删除该组件代码即可隐藏按钮。由于其底层依赖的Radix UI默认启用ESC键关闭功能，移除按钮后该功能会自动保留。

示例代码对比：

// 修改前（带关闭按钮）
<Dialog>
  <DialogTrigger>打开对话框</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
      <DialogClose>
        <X />
      </DialogClose>
    </DialogHeader>
    <p>对话框内容</p>
  </DialogContent>
</Dialog>

// 修改后（隐藏关闭按钮，保留ESC关闭）
<Dialog>
  <DialogTrigger>打开对话框</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
      {/* 移除DialogClose组件 */}
    </DialogHeader>
    <p>对话框内容</p>
  </DialogContent>
</Dialog>

方法2：通过CSS隐藏按钮（需保留组件结构时） #

如果需要保留<Dialog.Close>组件的结构，可通过CSS将其隐藏：

<DialogClose className="hidden">
  <X />
</DialogClose>

或在全局样式中添加：

[data-radix-dialog-close] {
  display: none;
}

确认ESC关闭功能生效 #

若担心ESC功能失效，可在<Dialog.Root>上显式设置属性（默认值即为true，可省略）：

<Dialog.Root closeOnEscape={true}>
  {/* 对话框内容 */}
</Dialog.Root>

内容的提问来源于stack exchange，提问作者EBDS