🐛 fix: 修正 prefixCls 在嵌套 ThemeProvider 中没有继承的问题 (#78)

* 🐛 fix: 修正 prefixCls 在嵌套 ThemeProvider 中没有继承的问题 * 🔖 chore(release): v3.4.1-beta.1 [skip ci] --------- Co-authored-by: semantic-release-bot <[email protected]>
ant-design · Jul 2, 2023 · d939a2a · d939a2a
1 parent f5eeb9c
commit d939a2a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [3.4.1-beta.1](https://github.com/ant-design/antd-style/compare/v3.4.0...v3.4.1-beta.1) (2023-07-02)
+
+### 🐛 Bug Fixes
+
+- 修正 prefixCls 在嵌套 ThemeProvider 中没有继承的问题 ([4e5488a](https://github.com/ant-design/antd-style/commit/4e5488a))
+
 # [3.4.0](https://github.com/ant-design/antd-style/compare/v3.3.0...v3.4.0) (2023-07-01)
 
 ### ✨ Features

diff --git a/docs/api/theme-provider.md b/docs/api/theme-provider.md
@@ -176,6 +176,12 @@ export default () => {
 
 :::
 
+## 嵌套 ThemeProvider
+
+在某些场景下，我们会需要在一个 ThemeProvider 中嵌套另一个 ThemeProvider，这时候需要注意的是，内层的 ThemeProvider 会覆盖外层的 ThemeProvider。
+
+<code src="../demos/ThemeProvider/nested-prefixCls.tsx"></code>
+
 ## styled 集成
 
 antd-style 通过 `styled` 方法提供了 styled-components 的 ThemeProvider 兼容能力，进而使用 antd-style 的 ThemeProvider 为 styled-components 或 emotion/styled 库提供主题消费。

diff --git a/docs/demos/ThemeProvider/nested-prefixCls.tsx b/docs/demos/ThemeProvider/nested-prefixCls.tsx
@@ -0,0 +1,34 @@
+/**
+ * debug: true
+ * iframe: true
+ */
+import { Button } from 'antd';
+import { ThemeProvider, createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  button: css`
+    .${prefixCls}-btn {
+      background: pink;
+    }
+  `,
+}));
+
+const Demo = () => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.button}>
+      <Button>按钮</Button>
+    </div>
+  );
+};
+
+const App = () => {
+  return (
+    <ThemeProvider appearance={'dark'} prefixCls={'a'}>
+      <ThemeProvider appearance={'light'}>
+        <Demo />
+      </ThemeProvider>
+    </ThemeProvider>
+  );
+};
+export default App;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.4.0",
+  "version": "3.4.1-beta.1",
   "description": "a css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",

diff --git a/src/factories/createThemeProvider/index.tsx b/src/factories/createThemeProvider/index.tsx
@@ -52,7 +52,7 @@ export const createThemeProvider = (
 
       theme,
       getStaticInstance,
-      prefixCls,
+      prefixCls: outPrefixCls,
       staticInstanceConfig,
 
       appearance,
@@ -74,10 +74,12 @@ export const createThemeProvider = (
         ? createStyledThemeProvider(styled)
         : DefaultStyledThemeProvider || DEFAULT_THEME_PROVIDER;
 
+      const prefixCls = outPrefixCls || defaultPrefixCls;
+
       return (
         <StyleEngineContext.Provider
           value={{
-            prefixCls: prefixCls || defaultPrefixCls,
+            prefixCls: prefixCls,
             StyledThemeContext: styled?.ThemeContext || StyledThemeContext || DEFAULT_THEME_CONTEXT,
             CustomThemeContext,
           }}