CSS styles not applying to React component unless explicitly included in parent component

I’m encountering an issue with CSS styles not being applied to a React component unless those styles are explicitly included in its parent component. Here’s the setup:

I have a Sidebar component and a DashboardLayout component in my React application. The Sidebar component is rendered within the DashboardLayout component.

In the Sidebar component (sidebar.tsx), I have certain CSS classes applied to elements, such as:

<Link 
  key={route.href} 
  href={route.href}
  className={cn ("text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-black hover:bg-white rounded-xl transition",
 pathname === route.href ? "text-white bg-white/10":"text-white-400")}>
  <div className="py-2 space-x-1"></div>
   <div className='flex items-center flex-1'>
     <route.icon className={cn("h-4 w-4 mr-2", route.color)} />
      {route.label}
   </div>
  </Link>

and in my DashboardLayout component (layout.tsx), I have the following structure:

const DashboardLayout = ({ children }: { children: React.ReactNode; }) => {
  return (
      <div className="h-full relative flex">
          {/* Sidebar */}
          <div className="hidden md:flex md:flex-col md:fixed inset-y-0 z-50
           text-sm p-3 w-72
           transition
           text-sky-500
           py-4 space-x-1
           text-white
           cursor-pointer hover:text-black          
           bg-black 
           ">
              <Sidebar />
          </div>
          {/* Vertical Divider */}
          <div className="md:hidden w-px bg-gray-300"></div>
          <div className="hidden md:block h-full w-px bg-gray-300 absolute inset-y-0 left-72"></div> {/* Desktop divider */}
          {/* Main Content */}
          <main className="flex-1 md:pl-72 relative z-40">
              <Navbar />
              {children}
          </main>
      </div>
  );
};

The issue I’m facing is that the CSS classes applied within the Sidebar component (sidebar.tsx) do not take effect unless I also include them in the parent DashboardLayout component (layout.tsx). If I remove these classes from layout.tsx, the styles defined in sidebar.tsx are not applied to the Sidebar component.

Here are the specific CSS properties I had to include in the parent DashboardLayout component from the Sidebar:

transition
text-sky-500
py-4 space-x-1
text-white
cursor-pointer hover:text-black

How can I ensure that these CSS styles defined in the Sidebar component apply properly to the Sidebar component without needing to duplicate them in the DashboardLayout component?