feat: css var prefix follow prefixCls by default (ant-design#47481)

* feat: css var prefix follow prefixCls by default * docs: update
DraculaPrince · Mar 29, 2024 · 571d81f · 571d81f
1 parent f9d4f4f
commit 571d81f
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 4 deletions.
diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx
@@ -269,6 +269,64 @@ describe('ConfigProvider.Theme', () => {
       });
     });
 
+    it('prefix follow prefixCls by default', () => {
+      const { container } = render(
+        <>
+          <ConfigProvider prefixCls="foo" theme={{ cssVar: { key: 'foo' }, hashed: true }}>
+            <Button className="button-foo">Button</Button>
+          </ConfigProvider>
+          <ConfigProvider prefixCls="bar">
+            <ConfigProvider theme={{ cssVar: { key: 'bar' }, hashed: true }}>
+              <Button className="button-bar">Button</Button>
+            </ConfigProvider>
+          </ConfigProvider>
+          <ConfigProvider prefixCls="apple">
+            <ConfigProvider prefixCls="banana" theme={{ cssVar: { key: 'banana' }, hashed: true }}>
+              <Button className="button-banana">Button</Button>
+            </ConfigProvider>
+          </ConfigProvider>
+          <ConfigProvider
+            prefixCls="apple"
+            theme={{ cssVar: { key: 'apple', prefix: 'cat' }, hashed: true }}
+          >
+            <Button className="button-cat">Button</Button>
+          </ConfigProvider>
+        </>,
+      );
+
+      const fooBtn = container.querySelector('.button-foo')!;
+      expect(fooBtn).toHaveClass('foo');
+      expect(fooBtn).toHaveStyle({
+        '--foo-color-text': 'rgba(0, 0, 0, 0.88)',
+        boxShadow: 'var(--foo-button-default-shadow)',
+        'border-radius': 'var(--foo-border-radius)',
+      });
+
+      const barBtn = container.querySelector('.button-bar')!;
+      expect(barBtn).toHaveClass('bar');
+      expect(barBtn).toHaveStyle({
+        '--bar-color-text': 'rgba(0, 0, 0, 0.88)',
+        boxShadow: 'var(--bar-button-default-shadow)',
+        'border-radius': 'var(--bar-border-radius)',
+      });
+
+      const bananaBtn = container.querySelector('.button-banana')!;
+      expect(bananaBtn).toHaveClass('banana');
+      expect(bananaBtn).toHaveStyle({
+        '--banana-color-text': 'rgba(0, 0, 0, 0.88)',
+        boxShadow: 'var(--banana-button-default-shadow)',
+        'border-radius': 'var(--banana-border-radius)',
+      });
+
+      const catBtn = container.querySelector('.button-cat')!;
+      expect(catBtn).toHaveClass('apple');
+      expect(catBtn).toHaveStyle({
+        '--cat-color-text': 'rgba(0, 0, 0, 0.88)',
+        boxShadow: 'var(--cat-button-default-shadow)',
+        'border-radius': 'var(--cat-border-radius)',
+      });
+    });
+
     it('component token should work', () => {
       const { container } = render(
         <ConfigProvider

diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts
@@ -10,6 +10,9 @@ import { devUseWarning } from '../../_util/warning';
 export default function useTheme(
   theme: ThemeConfig,
   parentTheme?: ThemeConfig,
+  config?: {
+    prefixCls?: string;
+  },
 ): ThemeConfig | undefined {
   // mark15 override
   theme.components = theme.components
@@ -64,7 +67,7 @@ export default function useTheme(
 
       const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
       const mergedCssVar = (themeConfig.cssVar ?? parentThemeConfig.cssVar) && {
-        prefix: 'ant', // Default to ant
+        prefix: config?.prefixCls, // Same as prefixCls by default
         ...(typeof parentThemeConfig.cssVar === 'object' ? parentThemeConfig.cssVar : {}),
         ...(typeof themeConfig.cssVar === 'object' ? themeConfig.cssVar : {}),
         key: (typeof themeConfig.cssVar === 'object' && themeConfig.cssVar?.key) || cssVarKey,

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -367,7 +367,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   useStyle(iconPrefixCls, csp);
 
-  const mergedTheme = useTheme(theme, parentContext.theme);
+  const mergedTheme = useTheme(theme, parentContext.theme, { prefixCls: getPrefixCls('') });
 
   if (process.env.NODE_ENV !== 'production') {
     existThemeConfig = existThemeConfig || !!mergedTheme;

diff --git a/docs/react/css-variables.en-US.md b/docs/react/css-variables.en-US.md
@@ -70,5 +70,5 @@ With CSS variable mode, the method of modifying the theme is the same as before,
 
 | Properties | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| prefix | Prefix of CSS Variables | string | `ant` | 5.12.0 |
+| prefix | Prefix of CSS Variables, same as `prefixCls` of ConfigProvider by default | string | `ant` | 5.12.0 |
 | key | The unique key of theme. Automatically set by `useId` in React 18, but need to be set manually in React 17 or 16 | string | `useId` in React 18 | 5.12.0 |
diff --git a/docs/react/css-variables.zh-CN.md b/docs/react/css-variables.zh-CN.md
@@ -70,5 +70,5 @@ hash 是 Ant Design 5.0 以来的特性之一，其功能是为每一份主题
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| prefix | CSS 变量的前缀 | string | `ant` | 5.12.0 |
+| prefix | CSS 变量的前缀，默认与 ConfigProvider 上配置的 `prefixCls` 相同。 | string | `ant` | 5.12.0 |
 | key | 当前主题的唯一识别 key. 在 React 18 中会默认用 `useId` 填充，小于 React 18 的版本需要手动填充。 | string | `useId` in React 18 | 5.12.0 |