diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 9010265ee7..65b2a49559 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/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(
+
+ Radio
+ ,
+ );
+
+ 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(
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 09c41b0ca9..961370186a 100644
--- a/components/config-provider/context.ts
+++ b/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) => {
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 92ed9e2504..38919f993a 100644
--- a/components/config-provider/index.en-US.md
+++ b/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 } | - | |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 4405efa869..78236f6773 100644
--- a/components/config-provider/index.tsx
+++ b/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 = (props) => {
breadcrumb,
pagination,
empty,
+ radio,
} = props;
// =================================== Warning ===================================
@@ -314,6 +316,7 @@ const ProviderChildren: React.FC = (props) => {
breadcrumb,
pagination,
empty,
+ radio,
};
const config = {
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index ef2d2ea385..a175016c91 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/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 } | - | |
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index d2b786682c..1b000759e6 100644
--- a/components/radio/radio.tsx
+++ b/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 = (
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(null);
const mergedRef = composeRef(ref, innerRef);
const { isFormItemInput } = React.useContext(FormItemInputContext);
@@ -66,6 +66,7 @@ const InternalRadio: React.ForwardRefRenderFunction = (
[`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
},
+ radio?.className,
className,
rootClassName,
hashId,
@@ -75,7 +76,7 @@ const InternalRadio: React.ForwardRefRenderFunction = (
// eslint-disable-next-line jsx-a11y/label-has-associated-control