feat: theme seperated (#38608)

* feat: theme seperated

* chore: code clean

* chore: update API

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');
+  });
 });

components/config-provider/context.tsx

@@ -30,6 +30,7 @@ export interface ThemeConfig {
   components?: OverrideToken;
   algorithm?: MappingAlgorithm | MappingAlgorithm[];
   hashed?: boolean;
+  seperated?: boolean;
 }
 
 export interface ConfigConsumerProps {

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>(
     () => {

docs/react/customize-theme-v5.en-US.md

@@ -194,9 +194,10 @@ const theme = {
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| token | 用于修改 Design Token | `AliasToken` | - |
+| token | Modify Design Token | `AliasToken` | - |
-| algorithm | 用于修改 Seed Token 到 Map Token 的算法 | `(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]` | `defaultAlgorithm` |
+| seperated | Ignore theme configured in upper ConfigProvider | boolean | - |
-| components | 用于修改各个组件的 Component Token 以及覆盖该组件消费的 Alias Token | OverrideToken | - |
+| 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
 

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 | - |