feat: ConfigProvider cssvar support boolean (#45760)

* feat: css var

* chore: fix type

* chore: fix type

* chore: update

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,15 +1,36 @@
 import React, { useContext } from 'react';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
-import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
+import {
+  BugFilled,
+  BugOutlined,
+  CodeFilled,
+  CodeOutlined,
+  ExperimentFilled,
+  ExperimentOutlined,
+} from '@ant-design/icons';
 import classNames from 'classnames';
-import { Tooltip } from 'antd';
+import { ConfigProvider, Tooltip } from 'antd';
 import DemoContext from '../../slots/DemoContext';
 import useLayoutState from '../../../hooks/useLayoutState';
+import useLocale from '../../../hooks/useLocale';
+
+const locales = {
+  cn: {
+    enableCssVar: '启用 CSS 变量',
+    disableCssVar: '禁用 CSS 变量',
+  },
+  en: {
+    enableCssVar: 'Enable CSS Var',
+    disableCssVar: 'Disable CSS Var',
+  },
+};
 
 const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
   const { showDebug, setShowDebug } = useContext(DemoContext);
+  const [locale] = useLocale(locales);
 
   const [expandAll, setExpandAll] = useLayoutState(false);
+  const [enableCssVar, setEnableCssVar] = useLayoutState(true);
 
   const expandTriggerClass = classNames('code-box-expand-trigger', {
     'code-box-expand-trigger-active': expandAll,
@@ -23,6 +44,10 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
     setExpandAll(!expandAll);
   };
 
+  const handleCssVarToggle = () => {
+    setEnableCssVar((v) => !v);
+  };
+
   const demos = React.useMemo(
     () =>
       items.reduce((acc, item) => {
@@ -74,8 +99,17 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
             <BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} />
           )}
         </Tooltip>
+        <Tooltip title={enableCssVar ? locale.disableCssVar : locale.enableCssVar}>
+          {enableCssVar ? (
+            <ExperimentFilled className={expandTriggerClass} onClick={handleCssVarToggle} />
+          ) : (
+            <ExperimentOutlined className={expandTriggerClass} onClick={handleCssVarToggle} />
+          )}
+        </Tooltip>
       </span>
+      <ConfigProvider theme={{ cssVar: enableCssVar }}>
         <DumiDemoGrid items={demos} />
+      </ConfigProvider>
     </div>
   );
 };

.dumi/theme/slots/Content/index.tsx

@@ -6,7 +6,7 @@ import DayJS from 'dayjs';
 import { FormattedMessage, useIntl, useRouteMeta, useTabMeta } from 'dumi';
 import type { ReactNode } from 'react';
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { Anchor, Avatar, Col, ConfigProvider, Skeleton, Space, Tooltip, Typography } from 'antd';
+import { Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocation from '../../../hooks/useLocation';
 import EditButton from '../../common/EditButton';
@@ -275,9 +275,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
             </Typography.Paragraph>
           ) : null}
           {!meta.frontmatter.__autoDescription && meta.frontmatter.description}
-          <ConfigProvider theme={{ cssVar: {} }}>
           <div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
-          </ConfigProvider>
           {(meta.frontmatter?.zhihu_url ||
             meta.frontmatter?.yuque_url ||
             meta.frontmatter?.juejin_url) && (

components/config-provider/context.ts

@@ -47,7 +47,8 @@ export interface ThemeConfig {
   algorithm?: MappingAlgorithm | MappingAlgorithm[];
   hashed?: boolean;
   inherit?: boolean;
-  cssVar?: {
+  cssVar?:
+    | {
         /**
          * Prefix for css variable, default to `antd`.
          */
@@ -56,7 +57,8 @@ export interface ThemeConfig {
          * Unique key for theme, should be set manually < react@18.
          */
         key?: string;
-  };
+      }
+    | boolean;
 }
 
 export interface ComponentStyleConfig {

components/config-provider/hooks/useTheme.ts

@@ -20,7 +20,10 @@ export default function useTheme(
 
   if (process.env.NODE_ENV !== 'production') {
     const cssVarEnabled = themeConfig.cssVar || parentThemeConfig.cssVar;
-    const validKey = !!(themeConfig.cssVar?.key || themeKey);
+    const validKey = !!(
+      (typeof themeConfig.cssVar === 'object' && themeConfig.cssVar?.key) ||
+      themeKey
+    );
     warning(
       !cssVarEnabled || validKey,
       'breaking',
@@ -49,9 +52,9 @@ export default function useTheme(
       const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
       const mergedCssVar = (themeConfig.cssVar || parentThemeConfig.cssVar) && {
         prefix: 'antd', // Default to antd
-        ...parentThemeConfig.cssVar,
+        ...(typeof parentThemeConfig.cssVar === 'object' ? parentThemeConfig.cssVar : {}),
-        ...themeConfig.cssVar,
+        ...(typeof themeConfig.cssVar === 'object' ? themeConfig.cssVar : {}),
-        key: themeConfig.cssVar?.key || cssVarKey,
+        key: (typeof themeConfig.cssVar === 'object' && themeConfig.cssVar?.key) || cssVarKey,
       };
 
       // Base token

components/config-provider/index.tsx

@@ -528,7 +528,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   // ================================ Dynamic theme ================================
   const memoTheme = React.useMemo(() => {
-    const { algorithm, token, components, ...rest } = mergedTheme || {};
+    const { algorithm, token, components, cssVar, ...rest } = mergedTheme || {};
     const themeObj =
       algorithm && (!Array.isArray(algorithm) || algorithm.length > 0)
         ? createTheme(algorithm)
@@ -568,6 +568,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
         override: mergedToken,
         ...parsedComponents,
       },
+      cssVar: cssVar as Exclude<ThemeConfig['cssVar'], boolean>,
     };
   }, [mergedTheme]);
 

components/select/index.tsx

@@ -124,7 +124,7 @@ const InternalSelect = <
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
   const [, hashId] = useStyle(prefixCls);
-  const rootCls = useCSSVarCls(rootPrefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
   const wrapCSSVar = useCSSVar(rootCls);
 
   const mode = React.useMemo(() => {