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