feat: CP support Rate className and style (#43270)

components/config-provider/__tests__/style.test.tsx

@@ -17,6 +17,7 @@ import Mentions from '../../mentions';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
 import Radio from '../../radio';
+import Rate from '../../rate';
 import Result from '../../result';
 import Segmented from '../../segmented';
 import Select from '../../select';
@@ -581,4 +582,15 @@ describe('ConfigProvider support style and className props', () => {
       backgroundColor: 'blue',
     });
   });
+
+  it('Should Rate className & style works', () => {
+    const { container } = render(
+      <ConfigProvider rate={{ className: 'cp-rate', style: { backgroundColor: 'blue' } }}>
+        <Rate />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLUListElement>('.ant-rate');
+    expect(element).toHaveClass('cp-rate');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -114,6 +114,7 @@ export interface ConfigConsumerProps {
   empty?: ComponentStyleConfig;
   badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
+  rate?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/index.en-US.md

@@ -118,6 +118,7 @@ const {
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -158,6 +158,7 @@ export interface ConfigProviderProps {
   empty?: ComponentStyleConfig;
   badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
+  rate?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -268,6 +269,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     empty,
     badge,
     radio,
+    rate,
   } = props;
 
   // =================================== Warning ===================================
@@ -340,6 +342,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     empty,
     badge,
     radio,
+    rate,
   };
 
   const config = {

components/config-provider/index.zh-CN.md

@@ -120,6 +120,7 @@ const {
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |

components/rate/index.tsx

@@ -1,7 +1,7 @@
 import StarFilled from '@ant-design/icons/StarFilled';
 import classNames from 'classnames';
 import RcRate from 'rc-rate';
-import type { RateProps as RcRateProps, RateRef } from 'rc-rate/lib/Rate';
+import type { RateRef, RateProps as RcRateProps } from 'rc-rate/lib/Rate';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import Tooltip from '../tooltip';
@@ -21,10 +21,12 @@ const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
     prefixCls,
     className,
     rootClassName,
+    style,
     tooltips,
     character = <StarFilled />,
     ...rest
   } = props;
+
   const characterRender = (node: React.ReactElement, { index }: RateNodeProps) => {
     if (!tooltips) {
       return node;
@@ -32,19 +34,22 @@ const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
     return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
   };
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, rate } = React.useContext(ConfigContext);
   const ratePrefixCls = getPrefixCls('rate', prefixCls);
 
   // Style
   const [wrapSSR, hashId] = useStyle(ratePrefixCls);
 
+  const mergedStyle: React.CSSProperties = { ...rate?.style, ...style };
+
   return wrapSSR(
     <RcRate
       ref={ref}
       character={character}
       characterRender={characterRender}
       {...rest}
-      className={classNames(className, rootClassName, hashId)}
+      className={classNames(className, rootClassName, hashId, rate?.className)}
+      style={mergedStyle}
       prefixCls={ratePrefixCls}
       direction={direction}
     />,