Skip to navigation
ReferenceComponents

<RootStyleRegistry>

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

Props

classNamePrefix
stringDefaults to ms

Optional prefix for Makeswift-generated CSS classes.

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.

forceImportant
booleanDefaults to false

When true, Makeswift-generated CSS declarations will include the !important qualifier, helping them override conflicting styles from your site. Enable this if external CSS prevents content from appearing as configured in Makeswift.

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.

"use client";
import { runtime } from "@/makeswift/runtime";
import { type SiteVersion } from "@makeswift/runtime/next";
import {
  ReactRuntimeProvider,
  RootStyleRegistry,
} from "@makeswift/runtime/next";
import "@/makeswift/components";
export function MakeswiftProvider({
  children,
  siteVersion,
}: {
  children: React.ReactNode;
  siteVersion: SiteVersion | null;
}) {
  return (
    <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}