fix: #24205 less class name prefix enhancement (#24459)

* replace ant class prefix with variable in mixin

* replace ant class prefix with variable in wave

components/_util/wave.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { findDOMNode } from 'react-dom';
 import TransitionEvents from '@ant-design/css-animation/lib/Event';
 import raf from './raf';
-import { ConfigConsumer, ConfigConsumerProps, CSPConfig } from '../config-provider';
+import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
 
 let styleForPesudo: HTMLStyleElement | null;
 
@@ -24,6 +24,8 @@ function isNotGrey(color: string) {
 }
 
 export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
+  static contextType = ConfigContext;
+
   private instance?: {
     cancel: () => void;
   };
@@ -40,6 +42,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
 
   private csp?: CSPConfig;
 
+  context: ConfigConsumerProps;
+
   componentDidMount() {
     const node = findDOMNode(this) as HTMLElement;
     if (!node || node.nodeType !== 1) {
@@ -66,7 +70,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     const { insertExtraNode } = this.props;
     this.extraNode = document.createElement('div');
     const { extraNode } = this;
-    extraNode.className = 'ant-click-animating-node';
+    const { getPrefixCls } = this.context;
+    extraNode.className = `${getPrefixCls('')}-click-animating-node`;
     const attributeName = this.getAttributeName();
     node.setAttribute(attributeName, 'true');
     // Not white or transparnt or grey
@@ -86,7 +91,9 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
 
       extraNode.style.borderColor = waveColor;
       styleForPesudo.innerHTML = `
-      [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
+      [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
+        '',
+      )}-click-animating-node {
         --antd-wave-shadow-color: ${waveColor};
       }`;
       if (!document.body.contains(styleForPesudo)) {
@@ -121,8 +128,11 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
   };
 
   getAttributeName() {
+    const { getPrefixCls } = this.context;
     const { insertExtraNode } = this.props;
-    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
+    return insertExtraNode
+      ? `${getPrefixCls('')}-click-animating`
+      : `${getPrefixCls('')}-click-animating-without-extra-node`;
   }
 
   bindAnimationEvent = (node: HTMLElement) => {

components/input/style/mixin.less

@@ -259,11 +259,11 @@
   }
 
   // Fix https://github.com/ant-design/ant-design/issues/5754
-  &-lg .@{ant-prefix}-select-single .ant-select-selector {
+  &-lg .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
     height: @input-height-lg;
   }
 
-  &-sm .@{ant-prefix}-select-single .ant-select-selector {
+  &-sm .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
     height: @input-height-sm;
   }
 

components/style/core/motion/other.less

@@ -4,8 +4,11 @@
   }
 }
 
-[ant-click-animating='true'],
-[ant-click-animating-without-extra-node='true'] {
+@click-animating-true: ~"[@{ant-prefix}-click-animating='true']";
+@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']";
+
+@{click-animating-true},
+@{click-animating-with-extra-node-true} {
   position: relative;
 }
 
@@ -14,8 +17,10 @@ html {
   --scroll-bar: 0;
 }
 
-[ant-click-animating-without-extra-node='true']::after,
-.ant-click-animating-node {
+@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';
+
+@{click-animating-with-extra-node-true-after},
+.@{ant-prefix}-click-animating-node {
   position: absolute;
   top: 0;
   right: 0;