feat(Cascader): unified provision of custom prefixCls

src/components/cascader/cascader.tsx

@@ -1,26 +1,23 @@
 import React, {
-  useState,
-  useEffect,
   ReactNode,
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useState,
 } from 'react'
-import Popup, { PopupProps } from '../popup'
-import {
+import type { FieldNamesType } from '../../hooks'
+import { useFieldNames } from '../../hooks'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { usePropsValue } from '../../utils/use-props-value'
+import { mergeProps } from '../../utils/with-default-props'
+import CascaderView, {
+  CascaderOption,
   CascaderValue,
   CascaderValueExtend,
-  CascaderOption,
 } from '../cascader-view'
-import { mergeProps } from '../../utils/with-default-props'
-import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { usePropsValue } from '../../utils/use-props-value'
-import CascaderView from '../cascader-view'
-import { useConfig } from '../config-provider'
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend'
-import { useFieldNames } from '../../hooks'
-import type { FieldNamesType } from '../../hooks'
-
-const classPrefix = `adm-cascader`
+import { useConfig } from '../config-provider'
+import Popup, { PopupProps } from '../popup'
 
 export type CascaderActions = {
   open: () => void
@@ -50,6 +47,7 @@ export type CascaderProps = {
   onTabsChange?: (index: number) => void
   activeIcon?: ReactNode
   fieldNames?: FieldNamesType
+  prefixCls?: string
 } & Pick<
   PopupProps,
   | 'getContainer'
@@ -69,7 +67,7 @@ const defaultProps = {
 }
 
 export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
-  const { locale } = useConfig()
+  const { locale, getPrefixCls } = useConfig()
   const props = mergeProps(
     defaultProps,
     {
@@ -79,6 +77,7 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
     },
     p
   )
+  const prefixCls = getPrefixCls('cascader', props.prefixCls)
 
   const [visible, setVisible] = usePropsValue({
     value: props.visible,
@@ -127,20 +126,20 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
 
   const cascaderElement = withNativeProps(
     props,
-    <div className={classPrefix}>
-      <div className={`${classPrefix}-header`}>
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-header`}>
         <a
-          className={`${classPrefix}-header-button`}
+          className={`${prefixCls}-header-button`}
           onClick={() => {
             props.onCancel?.()
             setVisible(false)
           }}
         >
           {props.cancelText}
         </a>
-        <div className={`${classPrefix}-header-title`}>{props.title}</div>
+        <div className={`${prefixCls}-header-title`}>{props.title}</div>
         <a
-          className={`${classPrefix}-header-button`}
+          className={`${prefixCls}-header-button`}
           onClick={() => {
             setValue(innerValue, true)
             setVisible(false)
@@ -149,7 +148,7 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
           {props.confirmText}
         </a>
       </div>
-      <div className={`${classPrefix}-body`}>
+      <div className={`${prefixCls}-body`}>
         <CascaderView
           {...props}
           value={innerValue}

src/components/cascader/tests/cascader.test.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { fireEvent, render, testA11y, waitFor } from 'testing'
 import Cascader from '../'
+import ConfigProvider from '../../config-provider'
 import { options } from '../demos/data'
 
 describe('Cascader', () => {
@@ -78,4 +79,23 @@ describe('Cascader', () => {
       expect(fn.mock.calls[0][0]).toEqual(['浙江', '杭州', '西湖区'])
     })
   })
+
+  test('should apply prefixCls from ConfigProvider', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Cascader options={[]} visible />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.config-prefix-cascader')).toBeTruthy()
+  })
+
+  test('should prioritize component prefixCls over ConfigProvider', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Cascader options={[]} visible prefixCls='component-prefix' />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.component-prefix')).toBeTruthy()
+    expect(document.querySelector('.config-prefix-cascader')).toBeFalsy()
+  })
 })