How to compose CSS in web frameworks

this is bad.tsx

function Page() {
  return (
    <div className="flex">
      <div>Page</div>
      <Component />
    </div>
  );
}

function Component() {
  return <div className="items-center">component</div>;
}

this is good.tsx

function Page() {
  return (
    <div className="flex">
      <div>Page</div>
      <Component className="items-center" />
    </div>
  );
}

function Component({ className }: { className: string }) {
  return <div className={className}>component</div>;
}