Reference@makeswift/runtimeComponents

<RootStyleRegistry>

The <RootStyleRegistry> component provides support for Makeswift’s CSS-in-JS runtime in Next.js’ App Router.

Props

cacheKey
stringDefaults to mswft

Optional key used when creating an Emotion cache for styles. Pass a unique value to avoid conflicts when multiple Emotion instances share the same key.

enableCssReset
booleanDefaults to

Toggle the built-in CSS reset. Set to false when using @layer-based CSS frameworks like Tailwind. See this guide for more information.

children
React.Node

The children components to render.

Example

The following example shows how the <RootStyleRegistry> is used to implement the <MakeswiftProvider> client component as outlined in the App Router Installation guide. The <MakeswiftProvider> is subsequently utilized in the App Router’s root layout.

1"use client";
2
3import { runtime } from "../../../../../makeswift/runtime";
4import { type SiteVersion } from "@makeswift/runtime/next";
5import {
6  ReactRuntimeProvider,
7  RootStyleRegistry,
8} from "@makeswift/runtime/next";
9import "../../../../../makeswift/components";
10
11export function MakeswiftProvider({
12  children,
13  siteVersion,
14}: {
15  children: React.ReactNode;
16  siteVersion: SiteVersion | null;
17}) {
18  return (
19    <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
20      <RootStyleRegistry>{children}</RootStyleRegistry>
21    </ReactRuntimeProvider>
22  );
23}