From c0de3b27379f409a73de41f4b726f8a3a94155e4 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 17 Nov 2022 00:22:15 +0800
Subject: [PATCH] feat: theme seperated (#38608)

* feat: theme seperated

* chore: code clean

* chore: update API
---
 .../config-provider/__tests__/theme.test.tsx  | 25 ++++++++++++++++---
 components/config-provider/context.tsx        |  1 +
 components/config-provider/hooks/useTheme.ts  |  3 ++-
 docs/react/customize-theme-v5.en-US.md        |  7 +++---
 docs/react/customize-theme-v5.zh-CN.md        |  1 +
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx
index 25e2e617d3..84cd534a69 100644
--- a/components/config-provider/__tests__/theme.test.tsx
+++ b/components/config-provider/__tests__/theme.test.tsx
@@ -21,7 +21,7 @@ describe('ConfigProvider.Theme', () => {
 
   const colorList = ['primaryColor', 'successColor', 'warningColor', 'errorColor', 'infoColor'];
 
-  colorList.forEach(colorName => {
+  colorList.forEach((colorName) => {
     it(colorName, () => {
       ConfigProvider.config({
         prefixCls: 'bamboo',
@@ -31,7 +31,7 @@ describe('ConfigProvider.Theme', () => {
       });
 
       const styles: any[] = Array.from(document.querySelectorAll('style'));
-      const themeStyle = styles.find(style =>
+      const themeStyle = styles.find((style) =>
         style.getAttribute('rc-util-key').includes('-dynamic-theme'),
       );
       expect(themeStyle).toBeTruthy();
@@ -123,11 +123,11 @@ describe('ConfigProvider.Theme', () => {
       </ConfigProvider>,
     );
     const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]')).map(
-      item => item?.innerHTML ?? '',
+      (item) => item?.innerHTML ?? '',
     );
     expect(
       dynamicStyles.some(
-        style => style.includes('.ant-input-number') && style.includes('width:50.1234px'),
+        (style) => style.includes('.ant-input-number') && style.includes('width:50.1234px'),
       ),
     ).toBeTruthy();
   });
@@ -176,4 +176,21 @@ describe('ConfigProvider.Theme', () => {
     );
     expect(tokens.a).toMatchObject(tokens.b);
   });
+
+  it('theme seperated should work', () => {
+    let tokenRef: any;
+    const Demo = () => {
+      const [, token] = useToken();
+      tokenRef = token;
+      return null;
+    };
+    render(
+      <ConfigProvider theme={{ token: { colorPrimary: '#1890ff' } }}>
+        <ConfigProvider theme={{ seperated: true }}>
+          <Demo />
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+    expect(tokenRef?.colorPrimaryText).toBe('#1677ff');
+  });
 });
diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx
index 2206a608bb..12fc201fbf 100644
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@@ -30,6 +30,7 @@ export interface ThemeConfig {
   components?: OverrideToken;
   algorithm?: MappingAlgorithm | MappingAlgorithm[];
   hashed?: boolean;
+  seperated?: boolean;
 }
 
 export interface ConfigConsumerProps {
diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts
index 273c7c36ae..3fbef01027 100644
--- a/components/config-provider/hooks/useTheme.ts
+++ b/components/config-provider/hooks/useTheme.ts
@@ -9,7 +9,8 @@ export default function useTheme(
   parentTheme?: ThemeConfig,
 ): ThemeConfig | undefined {
   const themeConfig = theme || {};
-  const parentThemeConfig: ThemeConfig = parentTheme || defaultConfig;
+  const parentThemeConfig: ThemeConfig =
+    themeConfig.seperated || !parentTheme ? defaultConfig : parentTheme;
 
   const mergedTheme = useMemo<ThemeConfig | undefined>(
     () => {
diff --git a/docs/react/customize-theme-v5.en-US.md b/docs/react/customize-theme-v5.en-US.md
index d5b8937ff9..35d77a079b 100644
--- a/docs/react/customize-theme-v5.en-US.md
+++ b/docs/react/customize-theme-v5.en-US.md
@@ -194,9 +194,10 @@ const theme = {
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| token | 用于修改 Design Token | `AliasToken` | - |
-| algorithm | 用于修改 Seed Token 到 Map Token 的算法 | `(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]` | `defaultAlgorithm` |
-| components | 用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias Token | OverrideToken | - |
+| token | Modify Design Token | `AliasToken` | - |
+| seperated | Ignore theme configured in upper ConfigProvider | boolean | - |
+| algorithm | Modify the algorithms of theme | `(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]` | `defaultAlgorithm` |
+| components | Modify Component Token and Alias Token applied to components | OverrideToken | - |
 
 ### OverrideToken
 
diff --git a/docs/react/customize-theme-v5.zh-CN.md b/docs/react/customize-theme-v5.zh-CN.md
index 39c223696c..2b3d25335b 100644
--- a/docs/react/customize-theme-v5.zh-CN.md
+++ b/docs/react/customize-theme-v5.zh-CN.md
@@ -195,6 +195,7 @@ const theme = {
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | token | 用于修改 Design Token | `AliasToken` | - |
+| seperated | 隔离上层 ConfigProvider 中配置的主题。 | boolean | - |
 | algorithm | 用于修改 Seed Token 到 Map Token 的算法 | `(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]` | `defaultAlgorithm` |
 | components | 用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias Token | OverrideToken | - |