ant-design / ant-design/cssinjs

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

Open
#243 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
287
Forks
80
PR merge metrics
No merged PRs in 30d

Description

## 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:

```tsx
// app/layout.tsx

{children}

```

3. Configure CSS layers for Tailwind v4 compatibility:

```css
/* index.css */
@layer theme, base, antd, components, utilities;
@import "tailwindcss";
```

4. Load any page with Ant Design components (initial load works fine)
5. Navigate to another page using Next.js `` (client-side navigation)
6. **Observe**: Styles are broken/missing on the new page
7. Hard refresh the page
8. **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:

```tsx

{children}

```

```css
@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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the issue from app/layout.tsx and index.css using StyleProvider with layer, then compare the SSR-extracted styles with styles injected after a Next.js Link navigation. Trace the client-side injection path for newly rendered components and verify that their styles remain wrapped in @layer antd after navigation, with the hard-refresh behavior unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, tailwindcss, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.