🛠️ Question about Sheet.tsx component: How to hide the default close button ❌ without modifying the component itself? 🛠️

[pavelbe]

Hello, community! 👋

I'm working with the Sheet.tsx component (a modal window component) and encountered a bit of a puzzle. I want to hide or remove the default close button (X) on the modal window, but can't seem to find a way to do this without making changes directly to the Sheet.tsx component itself.

I've already tried removing SheetClose and even SheetHeader from my code, but the X button still appears. I'm looking for a solution that would allow me to hide this button without needing to modify the source code of the Sheet.tsx component. 😕

It's important for me to keep the integrity of the component for future use and updates, so I don't want to make changes directly in its code. Maybe there's a way through CSS or some props that I'm missing?

I would be grateful for any ideas or suggestions! 🙏

Thank you in advance for your help! 🌟

[jcenlo]

I found a solution is some post in the past

https://codesandbox.io/p/sandbox/upbeat-galileo-6rxfm7?file=%2Fsrc%2FApp.tsx%3A65%2C29-65%2C56

<Sheet open={isCampaignModalOpen} onOpenChange={handleClose}>

[geralddevelop]

I know you mention WITHOUT modifying the component but here is a vesion where it does modify the Sheet component.

// sheet.tsx
...
interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {
  showClose?: boolean;
}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(
  (
    { side = "right", showClose = true, className, children, ...props },
    ref
  ) => (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        ref={ref}
        className={cn(sheetVariants({ side }), className)}
        {...props}
      >
        {children}
        {showClose && (
          <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
            <X className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </SheetPrimitive.Close>
        )}
      </SheetPrimitive.Content>
    </SheetPortal>
  )
);
...

<SheetContent showClose={false}>
    ...
</SheetContent>

How to use it.

[justjundana]

Based on my experience, I found a clean, non-invasive solution for hiding the default close button in Sheet components.

Recommended Solution 🌟

The most straightforward and type-safe approach I discovered is using Tailwind CSS arbitrary variant:

<SheetContent className="[&>button:first-child]:hidden">
  {/* Your sheet content */}
</SheetContent>

Happy coding! May your components be clean and your code be elegant. 🚀✨