shadcn /ui <SheetContent> component that need something

Question

I am developing a website using React and the ShadCN-UI library for the front end. Currently, I'm using the "Sheet" component as indicated in the official documentation, but I'm encountering an error with the "SheetContent" tag that I don't understand:

Type '{ children: Element; className: string; }' is not assignable to type 'IntrinsicAttributes & SheetContentProps & RefAttributes'. Property 'children' does not exist on type 'IntrinsicAttributes & SheetContentProps & RefAttributes'.ts(2322)

However, all I did was add a class. Here's my code:

"use client";

import { ShoppingCart } from "lucide-react";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "./ui/sheet";

const Cart = () => {
  return (
    <Sheet>
      <SheetTrigger className="group -m-2 flex items-center p-2">
        <ShoppingCart
          aria-hidden="true"
          className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
        />
        <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
          0
        </span>
      </SheetTrigger>
      <SheetContent className="flex w-full flex-col pr-0 sm:max-w-lg">
        <SheetHeader className="space-y-2.5 pr-6">
          <SheetTitle>Cart (0)</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
};

export default Cart;

Official documentation: https://ui.shadcn.com/docs/components/sheet

Does anyone have an idea what might be causing this error?

Thanks in advance!

Reading the code, deleting the class, but the error is the same

Answer 1

you gotta add asChild to your sheet trigger

<SheetTrigger asChild>