Shadcn 对话框变得模糊

Question

我不知道为什么有时我的 shadcn 对话框组件变得模糊，如下所示

当我关闭

switch

组件时，它就不再模糊了。所以看起来改变对话框的大小会使它变得模糊。如何避免这种情况？下面是清晰的：

Answer 1

在大多数情况下，将

translate-y-[-50%]

 组件文件中的 

translate-y-[-53%]

 更改为 

dialog.tsx

 可以消除模糊性。当我将焦点转移到对话框中的 TinyMCE 输入上时，它仍然会发生。

  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "[&>div]:p-6 overflow-hidden !p-0 pt-[4.5rem] fixed left-[50%] top-[50%] z-20 grid w-full max-w-2xl translate-x-[-50%] translate-y-[-53%] border border-slate-200 bg-white shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md md:w-full dark:border-slate-800 dark:bg-slate-950",
        className
      )}
    data-test="dialog-content"
      {...props}
    >
    {children}
      
    
    </DialogPrimitive.Content>
  </DialogPortal>
))```