How to change the color and backdrop of the Overlay in the Dialog component?

[alamenai]

Hi everyone,

I'm using the Dialog component, and I want to change the color of the Overlay and change the backdrop value. I found that Dialog does not have className property.

Code

  <Dialog>
            <DialogTrigger>
              <Info size={16} className='text-slate-600' />
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Are you absolutely sure?</DialogTitle>
                <DialogDescription>
                  This action cannot be undone. This will permanently delete your account and remove your data from our
                  servers.
                </DialogDescription>
              </DialogHeader>
            </DialogContent>
          </Dialog>
```

[btniq]

components are all yours you can change it or you can crush the previous style by styling the DialogContent Component then it will work

[alamenai]

I changed the source code directly as you mentioned. However, the dialogue content has not className te re-style it.

[krishnagkmit]

in the source code /components/ui/dialog.tsx file make prop like showOverlay to DialogComponent and DialogOverlay and then you can just pass this prop from any dialog where you do not need overlay

const DialogOverlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, DialogOverlayProps>(
  ({ className, showOverlay = true, ...props }, ref) => (
    <DialogPrimitive.Overlay
      ref={ref}
      className={cn(
        'fixed inset-0 z-50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
        className,
        {
          'bg-black/80': showOverlay,
        },
      )}
      {...props}
    />
  ),
);

const DialogContent = forwardRef<
  ElementRef<typeof DialogPrimitive.Content>,
  ExtendedDialogContentProps
>(({ className, children, showOverlay, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay showOverlay={showOverlay} />
  ...rest of the component
   

for typescript add these types to add showOverlay

type DialogOverlayProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
  showOverlay?: boolean;
};

interface ExtendedDialogContentProps
  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  showOverlay?: boolean;
}

now where even you want to use this just pass showOverlay to the DialogComponent, for eg:-

  <Dialog>
     <DialogTrigger>
        <Info size={16} className='text-slate-600' />
     </DialogTrigger>
     <DialogContent showOverlay={false}>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
              <DialogDescription>
                  This action cannot be undone. This will permanently delete your account and remove your data from our
                  servers.
              </DialogDescription>
          </DialogHeader>
    </DialogContent>
  </Dialog>