generated from react-component/footer
-
Notifications
You must be signed in to change notification settings - Fork 82
Open
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
- Set up Next.js App Router with Ant Design and Tailwind CSS v4
- Configure
StyleProviderwithlayerprop as per docs:
// app/layout.tsx
<StyleProvider cache={cache} hashPriority="high" layer>
{children}
</StyleProvider>- Configure CSS layers for Tailwind v4 compatibility:
/* index.css */
@layer theme, base, antd, components, utilities;
@import "tailwindcss";- Load any page with Ant Design components (initial load works fine)
- Navigate to another page using Next.js
<Link>(client-side navigation) - Observe: Styles are broken/missing on the new page
- Hard refresh the page
- 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 antdor 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
Labels
No labels