覆盖默认的 shadcn 属性？

Question

我想使用ShadCN组件库创建一个对话框，但它在右上角有一个内置的关闭按钮，但我希望它在其他地方，假设我想将它作为下面的按钮，我该如何制作它发生？我尝试在其他地方创建一个不同的并给它一个 asChild 属性，但这不起作用。我想我错过了一些大事。谢谢大家的帮助。

这是我当前的代码以及它在前端的外观。

"use client";
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog"; //shadCN components
import { Button } from "@/components/ui/button";
import { DialogClose } from "@radix-ui/react-dialog";

export default function Home() {


  return (
    <main>
      <Dialog>
        <DialogTrigger>
          <div>XXX</div>
        </DialogTrigger>

        <DialogContent className="transition delay-0 duration-0">
          
          <DialogTitle>
            asda
          </DialogTitle>
          
          <DialogClose asChild={true}>
            <Button>Close</Button>
          </DialogClose>

        </DialogContent>
      </Dialog>
    </main>
  );
}

视觉

我尝试让右上角的x消失。

Answer 1

无法删除默认的关闭按钮。但您可以从

dialog.tsx

文件中删除它，或者使用自定义 prop 来处理它。

要创建自定义关闭按钮，您可以使用

DialogClose

组件。

<DialogClose asChild>
  <Button type="button" variant="secondary">
    Close
  </Button>
</DialogClose>

这里是 shadcn 文档中的文档 自定义关闭按钮