Stoop

GitHub
Home
/API Reference
/getCssText

getCssText

#

Get all generated CSS text for server-side rendering

Usage

#
import { getCssText } from "./theme";

// Default theme
const cssText = getCssText();

// Specific theme by name
const darkCss = getCssText("dark");

// Theme object directly
const customCss = getCssText(customTheme);

Parameters

#
ParameterTypeDescription
themestring | ThemeOptional theme name or theme object (defaults to default theme)

Returns

#

Returns a string containing all generated CSS including:

Next.js App Router

#

In your root layout (app/layout.tsx):

import { type ReactNode } from "react";
import { getCssText } from "./theme";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html>
      <head>
        <style
          id="stoop-styles"
          dangerouslySetInnerHTML={{ __html: getCssText() }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js Pages Router

#

In your pages/_document.tsx:

import { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "../theme";

export default function Document() {
  return (
    <Html>
      <Head>
        <style
          id="stoop-styles"
          dangerouslySetInnerHTML={{ __html: getCssText() }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Notes

#