Merge pull request #573 from oceanbase/zhuyue-dev

fix(design): ConfigProvider theme.token.fontFamily customization should work
oceanbase · Apr 25, 2024 · e433358 · e433358
2 parents 931f9b9 + 617529b
commit e433358
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/packages/design/src/config-provider/__tests__/theme.test.tsx b/packages/design/src/config-provider/__tests__/theme.test.tsx
@@ -6,7 +6,7 @@ import defaultTheme from '../../theme/default';
 const antToken = theme.getDesignToken();
 
 describe('ConfigProvider theme', () => {
-  it('ConfigProvider theme token', () => {
+  it('token', () => {
     const Child1 = () => {
       const { token } = useToken();
       expect(token.colorBgLayout).toBe(defaultTheme.token.colorBgLayout);
@@ -41,7 +41,43 @@ describe('ConfigProvider theme', () => {
     );
   });
 
-  it('ConfigProvider theme.customFont', () => {
+  // test order should before customFont to avoid be affected
+  it('token.fontFamily', () => {
+    const Child1 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(antToken.fontFamily);
+      return <div />;
+    };
+    const Child2 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Custom Font'`);
+      return <div />;
+    };
+    const Child3 = () => {
+      const { token } = useToken();
+      expect(token.fontFamily).toBe(`'Custom Font'`);
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child1 />
+        <ConfigProvider
+          theme={{
+            token: {
+              fontFamily: `'Custom Font'`,
+            },
+          }}
+        >
+          <Child2 />
+          <ConfigProvider>
+            <Child3 />
+          </ConfigProvider>
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+  });
+
+  it('customFont', () => {
     const Child1 = () => {
       const { token } = useToken();
       expect(token.fontFamily).toBe(antToken.fontFamily);

diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -108,6 +108,8 @@ const ConfigProvider: ConfigProviderType = ({
   const mergedTheme = merge(parentContext.theme, theme);
   const currentTheme = mergedTheme?.isDark ? darkTheme : defaultTheme;
   const { token } = themeConfig.useToken();
+  const fontFamily = mergedTheme.token?.fontFamily || token.fontFamily;
+  const customFont = mergedTheme.customFont;
 
   // inherit from parent StyleProvider
   const parentStyleContext = React.useContext<StyleContextProps>(StyleContext);
@@ -135,9 +137,9 @@ const ConfigProvider: ConfigProviderType = ({
       theme={merge(currentTheme, mergedTheme, {
         token: {
           fontFamily:
-            mergedTheme.customFont && !token.fontFamily.startsWith(`'Source Sans Pro'`)
-              ? `'Source Sans Pro', ${token.fontFamily}`
-              : token.fontFamily,
+            customFont && !fontFamily.startsWith(`'Source Sans Pro'`)
+              ? `'Source Sans Pro', ${fontFamily}`
+              : fontFamily,
         },
       })}
       renderEmpty={