fix(design): fontFamily in nested ConfigProvider should be correct wh…

…en enable theme.customFont
oceanbase · Apr 25, 2024 · 4cb9141 · 4cb9141
1 parent 59be31e
commit 4cb9141
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/packages/design/src/config-provider/__tests__/theme.test.tsx b/packages/design/src/config-provider/__tests__/theme.test.tsx
@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
 import { render } from '@testing-library/react';
-import { ConfigProvider, useToken } from '@oceanbase/design';
+import { ConfigProvider, useToken, theme } from '@oceanbase/design';
 import defaultTheme from '../../theme/default';
 
+const antToken = theme.getDesignToken();
+
 describe('ConfigProvider theme', () => {
   it('ConfigProvider theme token', () => {
     const Child1 = () => {
@@ -38,4 +40,37 @@ describe('ConfigProvider theme', () => {
       </ConfigProvider>
     );
   });
+
+  it('ConfigProvider theme.customFont', () => {
+    const Child1 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(antToken.fontFamily);
+      return <div />;
+    };
+    const Child2 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Source Sans Pro', ${antToken.fontFamily}`);
+      return <div />;
+    };
+    const Child3 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Source Sans Pro', ${antToken.fontFamily}`);
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child1 />
+        <ConfigProvider
+          theme={{
+            customFont: 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
@@ -134,9 +134,10 @@ const ConfigProvider: ConfigProviderType = ({
       )}
       theme={merge(currentTheme, mergedTheme, {
         token: {
-          fontFamily: mergedTheme.customFont
-            ? `'Source Sans Pro', ${token.fontFamily}`
-            : token.fontFamily,
+          fontFamily:
+            mergedTheme.customFont && !token.fontFamily.startsWith(`'Source Sans Pro'`)
+              ? `'Source Sans Pro', ${token.fontFamily}`
+              : token.fontFamily,
         },
       })}
       renderEmpty={