feat: Cascader support cssVar (#45858)

* feat: cascader support cssvar

* fix: replace rootCls

* fix: add rootCls

* fix: panel add rootCls

* fix: add cascaderRootCls

components/cascader/Panel.tsx

@@ -5,6 +5,7 @@ import type { PickType } from 'rc-cascader/lib/Panel';
 
 import type { CascaderProps } from '.';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useBase from './hooks/useBase';
 import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
@@ -32,6 +33,8 @@ export default function CascaderPanel(props: CascaderPanelProps) {
   );
 
   const [, hashId] = useStyle(cascaderPrefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
   usePanelStyle(cascaderPrefixCls);
 
   const isRtl = mergedDirection === 'rtl';
@@ -54,7 +57,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
       {...props}
       checkable={checkable}
       prefixCls={cascaderPrefixCls}
-      className={classNames(className, hashId, rootClassName)}
+      className={classNames(className, hashId, rootClassName, rootCls, cascaderRootCls)}
       notFoundContent={mergedNotFoundContent}
       direction={mergedDirection}
       expandIcon={mergedExpandIcon}

components/cascader/index.tsx

@@ -12,6 +12,7 @@ import RcCascader from 'rc-cascader';
 import type { Placement } from 'rc-select/lib/BaseSelect';
 import omit from 'rc-util/lib/omit';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import type { SelectCommonPlacement } from '../_util/motion';
 import { getTransitionName } from '../_util/motion';
 import genPurePanel from '../_util/PurePanel';
@@ -21,10 +22,12 @@ import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import useSelectStyle from '../select/style';
+import useSelectCSSVar from '../select/style/cssVar';
 import useBuiltinPlacements from '../select/useBuiltinPlacements';
 import useIcons from '../select/useIcons';
 import useShowArrow from '../select/useShowArrow';
@@ -34,7 +37,7 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import CascaderPanel from './Panel';
 import useStyle from './style';
-import { useZIndex } from '../_util/hooks/useZIndex';
+import useCSSVar from './style/cssVar';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -211,8 +214,12 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const rootPrefixCls = getPrefixCls();
 
-  const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls);
-  const [wrapCascaderSSR] = useStyle(cascaderPrefixCls);
+  const [, hashId] = useSelectStyle(prefixCls);
+  useStyle(cascaderPrefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
+  const wrapSelectCSSVar = useSelectCSSVar(rootCls);
+  const wrapCascaderCSSVar = useCSSVar(cascaderRootCls);
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
@@ -229,6 +236,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
       [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl',
     },
     rootClassName,
+    rootCls,
+    cascaderRootCls,
     hashId,
   );
 
@@ -310,6 +319,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
         cascader?.className,
         className,
         rootClassName,
+        rootCls,
+        cascaderRootCls,
         hashId,
       )}
       disabled={mergedDisabled}
@@ -339,7 +350,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
     />
   );
 
-  return wrapCascaderSSR(wrapSelectSSR(renderNode));
+  return wrapCascaderCSSVar(wrapSelectCSSVar(renderNode));
 }) as unknown as (<OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(
   props: React.PropsWithChildren<CascaderProps<OptionType>> & { ref?: React.Ref<CascaderRef> },
 ) => React.ReactElement) & {

components/cascader/style/columns.ts

@@ -1,4 +1,4 @@
-import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { unit, type CSSInterpolation } from '@ant-design/cssinjs';
 
 import type { CascaderToken } from '.';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
@@ -59,7 +59,7 @@ const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CS
           '-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
 
           '&:not(:last-child)': {
-            borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+            borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
           },
 
           '&-item': {

components/cascader/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister('Cascader', prepareComponentToken);

components/cascader/style/panel.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 
 import { prepareComponentToken, type CascaderToken } from '.';
 import { genComponentStyleHook, type GenerateStyle } from '../../theme/internal';
@@ -13,7 +13,7 @@ const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSO
       getColumnsStyle(token),
       {
         display: 'inline-flex',
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
         borderRadius: token.borderRadiusLG,
         overflowX: 'auto',
         maxWidth: '100%',