Bug: antd ProTable + next-intl breaks theme switch after locale change (Dark → Light)

[duc30012001]

I'm using antd with ProTable in a Next.js app that also uses next-intl for internationalization and supports light/dark theme switching.

• When the current theme is dark, and I switch the locale (via next-intl), everything works fine visually.
• But after that, if I try to change the theme back to light mode, the ProTable styles break or become inconsistent (see attached image).
• If I don't use antdpro, nothing happen

Reproduction Steps:

• Set theme to dark mode.
• Change locale using next-intl.
• Switch back to light mode.
• Observe ProTable's visual/functional issues.

Stack

• "@ant-design/nextjs-registry": "^1.0.2",
• "@ant-design/pro-components": "^2.8.9",
• "@emotion/css": "^11.13.5",
• "antd": "^5.26.5"
• "next-intl": "^4.3.4"
• "next": "14.2.30"

[dosubot[bot]]

Hi @duc30012001! I'm Dosu and I’m helping the pro-components team.

This is a known issue with ProTable's advanced style token cache: after a locale change (via next-intl), ProTable's style cache doesn't update, so when you switch themes, styles can break or become inconsistent. This doesn't affect base antd components because their style cache always stays in sync with the context, but ProTable's cache doesn't include the locale as a dependency, so it gets out of sync after a locale change followed by a theme switch.

A robust workaround is to force a remount of the provider subtree (such as your ConfigProvider or ProConfigProvider) whenever either the theme or locale changes. You can do this by setting a key prop on your provider that changes with both the theme and the locale. For example:

<ConfigProvider key={`${theme}-${locale}`} theme={themeConfig} locale={antdLocale}>
  <ProConfigProvider>
    {/* ...your app... */}
  </ProConfigProvider>
</ConfigProvider>

This will flush and reestablish the style context and cache, keeping ProTable styles consistent after theme and locale changes. There is no public API in ProTable or ProConfigProvider to force style cache regeneration; the key prop remount pattern is the main code-level workaround supported by the current architecture.

More details on the context and cache system can be found in the pro-components codebase.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}