diff --git a/src/index.tsx b/src/index.tsx index 0b6bb1b..3b66e27 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import MotionThumb from './MotionThumb'; +export type SemanticName = 'item' | 'label'; export type SegmentedValue = string | number; export type SegmentedRawOption = SegmentedValue; @@ -41,6 +42,8 @@ export interface SegmentedProps motionName?: string; vertical?: boolean; name?: string; + classNames?: Partial>; + styles?: Partial>; } function getValidTitle(option: SegmentedLabeledOption) { @@ -74,6 +77,9 @@ function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] { const InternalSegmentedOption: React.FC<{ prefixCls: string; className?: string; + style?: React.CSSProperties; + classNames?: Partial>; + styles?: Partial>; disabled?: boolean; checked: boolean; label: React.ReactNode; @@ -92,6 +98,9 @@ const InternalSegmentedOption: React.FC<{ }> = ({ prefixCls, className, + style, + styles, + classNames: segmentedClassNames, disabled, checked, label, @@ -117,6 +126,7 @@ const InternalSegmentedOption: React.FC<{ className={classNames(className, { [`${prefixCls}-item-disabled`]: disabled, })} + style={style} onMouseDown={onMouseDown} >
{label}
@@ -155,6 +169,9 @@ const Segmented = React.forwardRef( name, onChange, className = '', + style, + styles, + classNames: segmentedClassNames, motionName = 'thumb-motion', ...restProps } = props; @@ -240,12 +257,12 @@ const Segmented = React.forwardRef( break; } }; - return (
( className={classNames( segmentedOption.className, `${prefixCls}-item`, + segmentedClassNames?.item, { [`${prefixCls}-item-selected`]: segmentedOption.value === rawValue && !thumbShow, @@ -294,6 +312,9 @@ const Segmented = React.forwardRef( segmentedOption.value === rawValue, }, )} + style={styles?.item} + classNames={segmentedClassNames} + styles={styles} checked={segmentedOption.value === rawValue} onChange={handleChange} onFocus={handleFocus} diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 2a52c98..d1d0844 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -765,4 +765,38 @@ describe('Segmented keyboard navigation', () => { 'rc-segmented-item-input-focused', ); }); + it('should apply custom styles to Segmented', () => { + const customClassNames = { + item: 'custom-item', + label: 'custom-label', + }; + + const customStyles = { + item: { color: 'yellow' }, + label: { backgroundColor: 'black' }, + }; + + const { container } = render( + , + ); + + const itemElement = container.querySelector( + '.rc-segmented-item', + ) as HTMLElement; + const labelElement = container.querySelector( + '.rc-segmented-item-label', + ) as HTMLElement; + + // check classNames + expect(itemElement.classList).toContain('custom-item'); + expect(labelElement.classList).toContain('custom-label'); + + // check styles + expect(itemElement.style.color).toBe('yellow'); + expect(labelElement.style.backgroundColor).toBe('black'); + }); });