TanStackT
TanStack•5mo ago•
5 replies
skinny-azure

Styles for specific component loading after render

Hey there 👋 It seems that when I use a css stylesheet in a specific component, the styles are loading a short time after the initial page render, causing a flash of styling to moments after page load. This issue persists even when the stylesheet is imported in the route file only as opposed to the component file. When I move the styling to the global css file, it obviously works. Does stylesheet bundling not work on a per-route basis or per-component basis?

// biography.tsx
import "./styles.css";

export function Biography({ content }: { content: string }) {
  return (
    <div
      className="hover:cursor-pointer hover:bg-card active:bg-gray-200 fade-container w-full max-w-full overflow-hidden rounded-xl px-5 pt-5 cursor-pointer"
      tabIndex={0}
    >
      <div className="content-wrapper flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <div className="font-semibold text-card-foreground">Biography</div>
          <svg
            className="h-4 w-4 opacity-60"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <div className="text-fade h-24 overflow-hidden font-serif">
          {content}
        </div>
      </div>
    </div>
  );
}

What is the best way to ensure these styles are available upon first render?
Was this page helpful?