如何改变Shadcn对话框组件的大小？

Question

我有一个来自 shadcn 的对话框组件，其中包含比实际对话框更宽的内容。我一直在尝试将 w-[full] 等顺风风格应用于但似乎没有任何作用。有没有办法改变实际弹出对话框的大小？我将粘贴我的代码。谢谢！

Shadcn - https://ui.shadcn.com/docs/components/dialog

这是我的设计照片。 设计

'use client';

import React, { useState } from 'react';
import CollapseCardFeatures from './_components/Cards';
import Quizmodal from './_components/QuizModal';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

const Page: React.FC = () => {

  return (
    <div className='w-full h-full relative'>
      <CollapseCardFeatures />
      <section className='w-full h-full flex justify-center py-5'>
        <Dialog>
            <DialogTrigger asChild>
                <div className="group relative w-fit transition-transform duration-300 active:scale-95">
                <button className="relative z-10 rounded-lg bg-gradient-to-br from-indigo-500 to-fuchsia-500 p-0.5 duration-300 group-hover:scale-110">
                    <span className="block rounded-md bg-slate-950 px-4 py-2 font-semibold text-slate-100 duration-300 group-hover:bg-slate-950/50 group-hover:text-slate-50 group-active:bg-slate-950/80">
                    Take Quiz
                    </span>
                </button>
                <span className="pointer-events-none absolute -inset-4 z-0 transform-gpu rounded-2xl bg-gradient-to-br from-indigo-500 to-fuchsia-500 opacity-30 blur-xl transition-all duration-300 group-hover:opacity-90 group-active:opacity-50" />
                </div>
            </DialogTrigger>
            <DialogContent className="w-full">
                <Quizmodal />
            </DialogContent>
        </Dialog>
        </section>
    </div>
  );
}

export default Page;

Answer 1

您需要覆盖

max-width

属性

<DialogContent className="max-w-fit">
  <Quizmodal />
</DialogContent>

注意：

w-full

已经被shadcn CLI应用了，所以不需要手动添加