fix(design): ConfigProvider theme.isAliyun should work correctly

oceanbase · Jun 20, 2024 · eb5cf0b · eb5cf0b
1 parent a5a4e14
commit eb5cf0b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 8 deletions.
diff --git a/packages/design/src/config-provider/__tests__/theme.test.tsx b/packages/design/src/config-provider/__tests__/theme.test.tsx
@@ -109,4 +109,37 @@ describe('ConfigProvider theme', () => {
       </ConfigProvider>
     );
   });
+
+  it('isAliyun', () => {
+    const Child1 = () => {
+      const { token } = useToken();
+      expect(token.colorPrimary).toBe(defaultTheme.token.colorPrimary);
+      return <div />;
+    };
+    const Child2 = () => {
+      const { token } = useToken();
+      expect(token.colorPrimary).toBe('#0064c8');
+      return <div />;
+    };
+    const Child3 = () => {
+      const { token } = useToken();
+      expect(token.colorPrimary).toBe('#0064c8');
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child1 />
+        <ConfigProvider
+          theme={{
+            isAliyun: true,
+          }}
+        >
+          <Child2 />
+          <ConfigProvider>
+            <Child3 />
+          </ConfigProvider>
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+  });
 });
diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -108,14 +108,14 @@ const ConfigProvider: ConfigProviderType = ({
   const parentExtendedContext =
     React.useContext<ExtendedConfigConsumerProps>(ExtendedConfigContext);
   const { isDark, isAliyun } = merge({}, parentContext.theme, theme);
-  const currentTheme = isAliyun
-    ? aliyunTheme
-    : isDark
-      ? darkTheme
-      : parentContext.theme
-        ? {}
-        : defaultTheme;
-  const mergedTheme = merge({}, parentContext.theme, currentTheme, theme);
+  const customTheme = isAliyun ? aliyunTheme : isDark ? darkTheme : undefined;
+  const mergedTheme = merge(
+    {},
+    customTheme ? {} : defaultTheme,
+    parentContext.theme,
+    customTheme,
+    theme
+  );
 
   const { token } = themeConfig.useToken();
   const fontFamily = mergedTheme.token?.fontFamily || token.fontFamily;