feat: config-provider support Radio className and style properties (#43067)

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

@@ -9,6 +9,7 @@ import Divider from '../../divider';
 import Empty from '../../empty';
 import Image from '../../image';
 import Pagination from '../../pagination';
+import Radio from '../../radio';
 import Result from '../../result';
 import Segmented from '../../segmented';
 import Slider from '../../slider';
@@ -199,6 +200,24 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Radio className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        radio={{
+          className: 'cp-className',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Radio>Radio</Radio>
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-radio-wrapper')).toHaveClass('cp-className');
+    expect(container.querySelector('.ant-radio-wrapper')).toHaveStyle({ background: 'red' });
+  });
+
   it('Should Slider className & style works', () => {
     const { container } = render(
       <ConfigProvider slider={{ className: 'cp-slider', style: { backgroundColor: 'red' } }}>

components/config-provider/context.ts

@@ -99,6 +99,7 @@ export interface ConfigConsumerProps {
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
   empty?: ComponentStyleConfig;
+  radio?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -112,6 +112,7 @@ const {
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.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 |
 | 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 | { showSearch?: boolean } | - |  |

components/config-provider/index.tsx

@@ -148,6 +148,7 @@ export interface ConfigProviderProps {
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
   empty?: ComponentStyleConfig;
+  radio?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -249,6 +250,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     breadcrumb,
     pagination,
     empty,
+    radio,
   } = props;
 
   // =================================== Warning ===================================
@@ -314,6 +316,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     breadcrumb,
     pagination,
     empty,
+    radio,
   };
 
   const config = {

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

@@ -114,6 +114,7 @@ const {
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { 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 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |

components/radio/radio.tsx

@@ -3,10 +3,10 @@ import type { CheckboxRef } from 'rc-checkbox';
 import RcCheckbox from 'rc-checkbox';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext } from '../form/context';
-import warning from '../_util/warning';
 import RadioGroupContext, { RadioOptionTypeContext } from './context';
 import type { RadioChangeEvent, RadioProps } from './interface';
 
@@ -16,7 +16,7 @@ const InternalRadio: React.ForwardRefRenderFunction<CheckboxRef, RadioProps> = (
   const groupContext = React.useContext(RadioGroupContext);
   const radioOptionTypeContext = React.useContext(RadioOptionTypeContext);
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, radio } = React.useContext(ConfigContext);
   const innerRef = React.useRef<CheckboxRef>(null);
   const mergedRef = composeRef(ref, innerRef);
   const { isFormItemInput } = React.useContext(FormItemInputContext);
@@ -66,6 +66,7 @@ const InternalRadio: React.ForwardRefRenderFunction<CheckboxRef, RadioProps> = (
       [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
     },
+    radio?.className,
     className,
     rootClassName,
     hashId,
@@ -75,7 +76,7 @@ const InternalRadio: React.ForwardRefRenderFunction<CheckboxRef, RadioProps> = (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label
       className={wrapperClassString}
-      style={style}
+      style={{ ...radio?.style, ...style }}
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
     >