feat: CP support Segmented className and style (#43072)

* feat: CP support Segmented className and style

* fix: remove useMemo

* docs: update docs

* update docs

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

@@ -2,6 +2,7 @@ import React from 'react';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import Divider from '../../divider';
+import Segmented from '../../segmented';
 import Space from '../../space';
 import Spin from '../../spin';
 import Typography from '../../typography';
@@ -135,4 +136,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('config-provider-spin');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Segmented className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        segmented={{ className: 'config-provider-segmented', style: { backgroundColor: 'red' } }}
+      >
+        <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-segmented');
+    expect(element).toHaveClass('config-provider-segmented');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -97,6 +97,10 @@ export interface ConfigConsumerProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  segmented?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -105,6 +105,7 @@ const {
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
+| segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { showSearch?: boolean } | - |  |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -146,6 +146,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  segmented?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -233,6 +237,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     iconPrefixCls: customIconPrefixCls,
     theme,
     componentDisabled,
+    segmented,
     spin,
     typography,
     divider,
@@ -287,6 +292,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     getPrefixCls,
     iconPrefixCls,
     theme: mergedTheme,
+    segmented,
     spin,
     typography,
     divider,

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

@@ -107,6 +107,7 @@ const {
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/segmented/index.tsx

@@ -50,10 +50,11 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
     block,
     options = [],
     size: customSize = 'middle',
+    style,
     ...restProps
   } = props;
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, segmented } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('segmented', customizePrefixCls);
   // Style
   const [wrapSSR, hashId] = useStyle(prefixCls);
@@ -82,19 +83,25 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
     [options, prefixCls],
   );
 
+  const cls = classNames(
+    className,
+    rootClassName,
+    segmented?.className,
+    {
+      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-sm`]: mergedSize === 'small',
+      [`${prefixCls}-lg`]: mergedSize === 'large',
+    },
+    hashId,
+  );
+
+  const mergeStyle: React.CSSProperties = { ...segmented?.style, ...style };
+
   return wrapSSR(
     <RcSegmented
       {...restProps}
-      className={classNames(
-        className,
-        rootClassName,
-        {
-          [`${prefixCls}-block`]: block,
-          [`${prefixCls}-sm`]: mergedSize === 'small',
-          [`${prefixCls}-lg`]: mergedSize === 'large',
-        },
-        hashId,
-      )}
+      className={cls}
+      style={mergeStyle}
       options={extendedOptions}
       ref={ref}
       prefixCls={prefixCls}