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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels