ant-design / ant-design/cssinjs
`Layer` prop on StyleProvider breaks styles after client-side navigation in Next.js App Router
- 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