From df70aa45dd26424aa48c7932c8fb941aa326bd34 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Sat, 11 Jan 2025 00:05:07 +0800
Subject: [PATCH 1/2] feat: segmented support classnames and styles

---
 src/index.tsx        | 22 ++++++++++++++++++++--
 tests/index.test.tsx | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 0b6bb1b..f23d639 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<ValueType = SegmentedValue>
   motionName?: string;
   vertical?: boolean;
   name?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 function getValidTitle(option: SegmentedLabeledOption) {
@@ -74,6 +77,8 @@ function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
 const InternalSegmentedOption: React.FC<{
   prefixCls: string;
   className?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   disabled?: boolean;
   checked: boolean;
   label: React.ReactNode;
@@ -92,6 +97,8 @@ const InternalSegmentedOption: React.FC<{
 }> = ({
   prefixCls,
   className,
+  styles,
+  classNames: segmentedClassNames,
   disabled,
   checked,
   label,
@@ -117,6 +124,7 @@ const InternalSegmentedOption: React.FC<{
       className={classNames(className, {
         [`${prefixCls}-item-disabled`]: disabled,
       })}
+      style={styles?.item}
       onMouseDown={onMouseDown}
     >
       <input
@@ -132,9 +140,13 @@ const InternalSegmentedOption: React.FC<{
         onKeyUp={onKeyUp}
       />
       <div
-        className={`${prefixCls}-item-label`}
+        className={classNames(
+          `${prefixCls}-item-label`,
+          segmentedClassNames?.label,
+        )}
         title={title}
         aria-selected={checked}
+        style={styles?.label}
       >
         {label}
       </div>
@@ -155,6 +167,9 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       name,
       onChange,
       className = '',
+      style,
+      styles,
+      classNames: segmentedClassNames,
       motionName = 'thumb-motion',
       ...restProps
     } = props;
@@ -240,12 +255,12 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           break;
       }
     };
-
     return (
       <div
         role="radiogroup"
         aria-label="segmented control"
         tabIndex={disabled ? undefined : 0}
+        style={style}
         {...divProps}
         className={classNames(
           prefixCls,
@@ -285,6 +300,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
               className={classNames(
                 segmentedOption.className,
                 `${prefixCls}-item`,
+                segmentedClassNames?.item,
                 {
                   [`${prefixCls}-item-selected`]:
                     segmentedOption.value === rawValue && !thumbShow,
@@ -294,6 +310,8 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
                     segmentedOption.value === rawValue,
                 },
               )}
+              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(
+      <Segmented
+        options={['iOS', 'Android', 'Web']}
+        classNames={customClassNames}
+        styles={customStyles}
+      />,
+    );
+
+    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');
+  });
 });

From a49bdc2e2b7e4e6843431c65910b95e7eb539b8c Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Mon, 13 Jan 2025 10:52:42 +0800
Subject: [PATCH 2/2] fix

---
 src/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index f23d639..3b66e27 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -77,6 +77,7 @@ function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
 const InternalSegmentedOption: React.FC<{
   prefixCls: string;
   className?: string;
+  style?: React.CSSProperties;
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   disabled?: boolean;
@@ -97,6 +98,7 @@ const InternalSegmentedOption: React.FC<{
 }> = ({
   prefixCls,
   className,
+  style,
   styles,
   classNames: segmentedClassNames,
   disabled,
@@ -124,7 +126,7 @@ const InternalSegmentedOption: React.FC<{
       className={classNames(className, {
         [`${prefixCls}-item-disabled`]: disabled,
       })}
-      style={styles?.item}
+      style={style}
       onMouseDown={onMouseDown}
     >
       <input
@@ -310,6 +312,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
                     segmentedOption.value === rawValue,
                 },
               )}
+              style={styles?.item}
               classNames={segmentedClassNames}
               styles={styles}
               checked={segmentedOption.value === rawValue}