Skip to content

Layer prop on StyleProvider breaks styles after client-side navigation in Next.js App Router #243

@jaqubowsky

Description

@jaqubowsky

Description

When using StyleProvider (or AntdRegistry from @ant-design/nextjs-registry) with the layer prop in a Next.js App Router application, styles work correctly on initial SSR load but break after client-side navigation.

Environment

  • antd: 6.2.0
  • @ant-design/cssinjs: 2.0.3
  • @ant-design/nextjs-registry: 1.3.0
  • next: 16.1.1
  • react: 19.2.3
  • tailwindcss: 4.1.18
  • next-intl: "^4.7.0"

Steps to Reproduce

  1. Set up Next.js App Router with Ant Design and Tailwind CSS v4
  2. Configure StyleProvider with layer prop as per docs:
// app/layout.tsx
<StyleProvider cache={cache} hashPriority="high" layer>
  {children}
</StyleProvider>
  1. Configure CSS layers for Tailwind v4 compatibility:
/* index.css */
@layer theme, base, antd, components, utilities;
@import "tailwindcss";
  1. Load any page with Ant Design components (initial load works fine)
  2. Navigate to another page using Next.js <Link> (client-side navigation)
  3. Observe: Styles are broken/missing on the new page
  4. Hard refresh the page
  5. Observe: Styles work correctly again

Expected Behavior

Styles should persist and work correctly after client-side navigation, with dynamically injected styles properly wrapped in @layer antd { ... }.

Actual Behavior

After client-side navigation:

  • Newly rendered Ant Design components have broken/missing styles
  • Styles appear to either not be wrapped in @layer antd or have injection timing issues
  • Hard refresh (full SSR) restores correct styling

Workaround

Remove the layer prop and use Tailwind's important modifier instead:

<StyleProvider cache={cache} hashPriority="high">
  {children}
</StyleProvider>
@layer theme, base, antd, components, utilities;
@import "tailwindcss" important;

Analysis

The layer prop works correctly during SSR (styles are extracted and wrapped in @layer antd). However, during client-side navigation, dynamically injected styles for new components appear to not respect the layer configuration, causing specificity conflicts with Tailwind utilities.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions