<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

App Router

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 
3 import { runtime } from "../../../../../makeswift/runtime";
4 import { type SiteVersion } from "@makeswift/runtime/next";
5 import {
6   ReactRuntimeProvider,
7   RootStyleRegistry,
8 } from "@makeswift/runtime/next";
9 import "../../../../../makeswift/components";
10 
11 export 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 }

1	"use client";
2
3	import { runtime } from "../../../../../makeswift/runtime";
4	import { type SiteVersion } from "@makeswift/runtime/next";
5	import {
6	ReactRuntimeProvider,
7	RootStyleRegistry,
8	} from "@makeswift/runtime/next";
9	import "../../../../../makeswift/components";
10
11	export 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	}