refactor(Typography): move hashId and cssVarCls into InternalTypography

- Make prefixCls required in InternalProps
- Move useStyle hook call from Typography to InternalTypography
- Move hashId and cssVarCls to component level

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/app/App.tsx

@@ -21,7 +21,7 @@ export interface AppProps<P = AnyObject> extends AppConfig {
   component?: CustomComponent<P> | false;
 }
 
-const App: React.FC<AppProps> = (props) => {
+const App = React.forwardRef<HTMLElement, AppProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     children,
@@ -79,6 +79,12 @@ const App: React.FC<AppProps> = (props) => {
     'When using cssVar, ensure `component` is assigned a valid React component string.',
   );
 
+  devUseWarning('App')(
+    !ref || component !== false,
+    'usage',
+    '`ref` is not supported when `component` is `false`. Please provide a valid `component` instead.',
+  );
+
   // ============================ Render ============================
   const Component = component === false ? React.Fragment : component;
 
@@ -90,7 +96,7 @@ const App: React.FC<AppProps> = (props) => {
   return (
     <AppContext.Provider value={memoizedContextValue}>
       <AppConfigContext.Provider value={mergedAppConfig}>
-        <Component {...(component === false ? undefined : rootProps)}>
+        <Component {...(component === false ? undefined : { ...rootProps, ref })}>
           {ModalContextHolder}
           {messageContextHolder}
           {notificationContextHolder}
@@ -99,7 +105,7 @@ const App: React.FC<AppProps> = (props) => {
       </AppConfigContext.Provider>
     </AppContext.Provider>
   );
-};
+});
 
 if (process.env.NODE_ENV !== 'production') {
   App.displayName = 'App';

components/app/__tests__/index.test.tsx

@@ -247,5 +247,20 @@ describe('App', () => {
         'Warning: [antd: App] When using cssVar, ensure `component` is assigned a valid React component string.',
       );
     });
+
+    it('should warn if component is false and ref is not empty', () => {
+      const domRef = React.createRef<HTMLSpanElement>();
+      render(<App ref={domRef} component={false} />);
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: App] `ref` is not supported when `component` is `false`. Please provide a valid `component` instead.',
+      );
+    });
+
+    it('App should support Ref', () => {
+      const domRef = React.createRef<HTMLSpanElement>();
+      const { container } = render(<App ref={domRef} className="bamboo" component="span" />);
+      expect(domRef.current).toBe(container.querySelector('.bamboo'));
+    });
   });
 });

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

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Modal } from 'antd';
 
 import ConfigProvider from '..';
-import { Button, InputNumber, Select } from '../..';
+import { Button, InputNumber, Select, Space } from '../..';
 import { render, waitFakeTimer } from '../../../tests/utils';
 import theme from '../../theme';
 import type { GlobalToken } from '../../theme/internal';
@@ -113,6 +113,21 @@ describe('ConfigProvider.Theme', () => {
     ).toBeTruthy();
   });
 
+  it('should support Addon component token', () => {
+    const { container } = render(
+      <ConfigProvider theme={{ components: { Addon: { colorText: '#0000FF', algorithm: true } } }}>
+        <Space.Compact>
+          <Space.Addon className="test-addon">Addon Content</Space.Addon>
+        </Space.Compact>
+      </ConfigProvider>,
+    );
+
+    const addon = container.querySelector('.test-addon')!;
+    expect(addon).toHaveStyle({
+      '--ant-color-text': '#0000FF',
+    });
+  });
+
   it('hashed should be true if not changed', () => {
     let hashId = 'hashId';
 

components/config-provider/context.ts

@@ -65,6 +65,7 @@ import type { TourProps } from '../tour/interface';
 import type { TransferProps } from '../transfer';
 import type { TreeProps } from '../tree';
 import type { TreeSelectProps } from '../tree-select';
+import type { TypographyClassNamesType, TypographyStylesType } from '../typography/Base';
 import type { UploadProps } from '../upload';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 
@@ -242,6 +243,11 @@ export type AlertConfig = ComponentStyleConfig &
 
 export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
 
+export type TypographyConfig = ComponentStyleConfig & {
+  classNames?: TypographyClassNamesType;
+  styles?: TypographyStylesType;
+};
+
 export type BreadcrumbConfig = ComponentStyleConfig &
   Pick<BreadcrumbProps, 'classNames' | 'styles' | 'separator' | 'dropdownIcon'>;
 
@@ -447,7 +453,7 @@ export interface ConfigComponentProps {
   collapse?: CollapseConfig;
   floatButton?: FloatButtonConfig;
   floatButtonGroup?: FloatButtonGroupConfig;
-  typography?: ComponentStyleConfig;
+  typography?: TypographyConfig;
   skeleton?: SkeletonConfig;
   spin?: SpinConfig;
   segmented?: SegmentedConfig;

components/config-provider/index.tsx

@@ -74,6 +74,7 @@ import type {
   TourConfig,
   TransferConfig,
   TreeSelectConfig,
+  TypographyConfig,
   UploadConfig,
   Variant,
   WaveConfig,
@@ -225,7 +226,7 @@ export interface ConfigProviderProps {
   collapse?: CollapseConfig;
   divider?: ComponentStyleConfig;
   drawer?: DrawerConfig;
-  typography?: ComponentStyleConfig;
+  typography?: TypographyConfig;
   skeleton?: SkeletonConfig;
   spin?: SpinConfig;
   segmented?: ComponentStyleConfig;

components/select/style/dropdown.ts

@@ -121,10 +121,6 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
               alignItems: 'center',
             },
 
-            [`&-active:not(${selectItemCls}-option-disabled)`]: {
-              backgroundColor: token.optionActiveBg,
-            },
-
             [`&-selected:not(${selectItemCls}-option-disabled)`]: {
               color: token.optionSelectedColor,
               fontWeight: token.optionSelectedFontWeight,
@@ -135,6 +131,10 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
               },
             },
 
+            [`&-active:not(${selectItemCls}-option-disabled)`]: {
+              backgroundColor: token.optionActiveBg,
+            },
+
             '&-disabled': {
               [`&${selectItemCls}-option-selected`]: {
                 backgroundColor: token.colorBgContainerDisabled,

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -16066,6 +16066,28 @@ exports[`renders components/space/demo/compact-nested.tsx extend context correct
 
 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/space/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-space-compact"
+>
+  <div
+    class="ant-space-addon ant-space-addon-compact-item ant-space-addon-compact-first-item css-var-test-id ant-space-addon-variant-outlined"
+  >
+    Addon
+  </div>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
+    type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/space/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/space/demo/debug.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -4097,6 +4097,26 @@ exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/space/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-space-compact"
+>
+  <div
+    class="ant-space-addon ant-space-addon-compact-item ant-space-addon-compact-first-item css-var-test-id ant-space-addon-variant-outlined"
+  >
+    Addon
+  </div>
+  <button
+    class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
+    type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders components/space/demo/debug.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"

components/space/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `ConfigProvider` 自定义 `Space.Addon` 的主题样式。
+
+## en-US
+
+Use `ConfigProvider` to customize the theme of `Space.Addon`.

components/space/demo/component-token.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Addon: { colorText: 'blue', algorithm: true },
+      },
+    }}
+  >
+    <Space.Compact>
+      <Space.Addon>Addon</Space.Addon>
+      <Button type="primary">Button</Button>
+    </Space.Compact>
+  </ConfigProvider>
+);
+
+export default App;

components/space/index.en-US.md

@@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/debug.tsx" debug>Diverse Child</code>
 <code src="./demo/gap-in-line.tsx" debug>Flex gap style</code>
 <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
+<code src="./demo/component-token.tsx" debug>Customize Addon with theme</code>
 
 ## API
 

components/space/index.zh-CN.md

@@ -38,6 +38,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/debug.tsx" debug>多样的 Child</code>
 <code src="./demo/gap-in-line.tsx" debug>Flex gap 样式</code>
 <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>
+<code src="./demo/component-token.tsx" debug>自定义主题</code>
 
 ## API
 

components/space/style/addon.ts

@@ -1,3 +1,4 @@
+import { resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import { genStyleHooks } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
@@ -7,11 +8,11 @@ import { genCssVar } from '../../theme/util/genStyleUtils';
 // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
 export interface ComponentToken {}
 
-interface SpaceToken extends FullToken<'Space'> {
+interface AddonToken extends FullToken<'Space'> {
   // Custom token here
 }
 
-const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
+const genSpaceAddonStyle: GenerateStyle<AddonToken> = (token) => {
   const {
     componentCls,
     borderRadius,
@@ -27,7 +28,7 @@ const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
     antCls,
   } = token;
 
-  const [varName, varRef] = genCssVar(antCls, 'space');
+  const [varName, varRef] = genCssVar(antCls, 'space-addon');
 
   return {
     [componentCls]: [
@@ -35,6 +36,7 @@ const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
       // ==                         Base                         ==
       // ==========================================================
       {
+        ...resetComponent(token),
         display: 'inline-flex',
         alignItems: 'center',
         gap: 0,
@@ -144,7 +146,7 @@ const genSpaceAddonStyle: GenerateStyle<SpaceToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genStyleHooks(['Space', 'Addon'], (token) => [
+export default genStyleHooks('Addon', (token) => [
   genSpaceAddonStyle(token),
   genCompactItemStyle(token, { focus: false }),
 ]);

components/theme/interface/components.ts

@@ -49,6 +49,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
 import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
 import type { ComponentToken as SliderComponentToken } from '../../slider/style';
 import type { ComponentToken as SpaceComponentToken } from '../../space/style';
+import type { ComponentToken as AddonComponentToken } from '../../space/style/addon';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 import type { ComponentToken as SplitterComponentToken } from '../../splitter/style';
 import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
@@ -68,6 +69,7 @@ import type { ComponentToken as UploadComponentToken } from '../../upload/style'
 
 export interface ComponentTokenMap {
   Affix?: AffixComponentToken;
+  Addon?: AddonComponentToken;
   Alert?: AlertComponentToken;
   Anchor?: AnchorComponentToken;
   Avatar?: AvatarComponentToken;

components/typography/Base/CopyBtn.tsx

@@ -16,6 +16,8 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
   onCopy: React.MouseEventHandler<HTMLButtonElement>;
   iconOnly: boolean;
   loading: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 const CopyBtn: React.FC<CopyBtnProps> = ({
@@ -28,6 +30,8 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
   tabIndex,
   onCopy,
   loading: btnLoading,
+  className,
+  style,
 }) => {
   const tooltipNodes = toList(tooltips);
   const iconNodes = toList(icon);
@@ -40,10 +44,11 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
     <Tooltip title={copyTitle}>
       <button
         type="button"
-        className={clsx(`${prefixCls}-copy`, {
+        className={clsx(`${prefixCls}-copy`, className, {
           [`${prefixCls}-copy-success`]: copied,
           [`${prefixCls}-copy-icon-only`]: iconOnly,
         })}
+        style={style}
         onClick={onCopy}
         aria-label={ariaLabel}
         tabIndex={tabIndex}

components/typography/Base/index.tsx

@@ -8,9 +8,10 @@ import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import { composeRef } from '@rc-component/util/lib/ref';
 import { clsx } from 'clsx';
 
+import type { SemanticType } from '../../_util/hooks';
 import isNonNullable from '../../_util/isNonNullable';
 import { isStyleSupport } from '../../_util/styleChecker';
-import { ConfigContext } from '../../config-provider';
+import type { DirectionType } from '../../config-provider';
 import useLocale from '../../locale/useLocale';
 import type { TooltipProps } from '../../tooltip';
 import Tooltip from '../../tooltip';
@@ -19,6 +20,7 @@ import useCopyClick from '../hooks/useCopyClick';
 import useMergedConfig from '../hooks/useMergedConfig';
 import usePrevious from '../hooks/usePrevious';
 import useTooltipProps from '../hooks/useTooltipProps';
+import { useTypographySemantic } from '../hooks/useTypographySemantic';
 import type { TypographyProps } from '../Typography';
 import Typography from '../Typography';
 import CopyBtn from './CopyBtn';
@@ -28,6 +30,41 @@ import { isEleEllipsis, isValidText } from './util';
 
 export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
 
+// Base typography props without generic parameter for semantic types
+export interface BaseTypographyProps extends React.HTMLAttributes<HTMLElement> {
+  id?: string;
+  prefixCls?: string;
+  className?: string;
+  rootClassName?: string;
+  style?: React.CSSProperties;
+  classNames?: TypographyClassNamesType;
+  styles?: TypographyStylesType;
+  children?: React.ReactNode;
+  'aria-label'?: string;
+  direction?: DirectionType;
+  /** @private */
+  component?: keyof JSX.IntrinsicElements;
+}
+
+export type TypographySemanticClassNames = {
+  root?: string;
+  actions?: string;
+  action?: string;
+};
+
+export type TypographySemanticStyles = {
+  root?: React.CSSProperties;
+  actions?: React.CSSProperties;
+  action?: React.CSSProperties;
+};
+
+export type TypographyClassNamesType = SemanticType<
+  BaseTypographyProps,
+  TypographySemanticClassNames
+>;
+
+export type TypographyStylesType = SemanticType<BaseTypographyProps, TypographySemanticStyles>;
+
 export interface CopyConfig {
   text?: string | (() => string | Promise<string>);
   onCopy?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
@@ -65,9 +102,8 @@ export interface EllipsisConfig {
   tooltip?: React.ReactNode | TooltipProps;
 }
 
-export interface BlockProps<
-  C extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
-> extends TypographyProps<C> {
+export interface BlockProps<C extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements>
+  extends TypographyProps<C> {
   title?: string;
   editable?: boolean | EditConfig;
   copyable?: boolean | CopyConfig;
@@ -126,6 +162,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     prefixCls: customizePrefixCls,
     className,
     style,
+    classNames,
+    styles,
+    direction: typographyDirection,
     type,
     disabled,
     children,
@@ -138,14 +177,18 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     onMouseLeave,
     ...restProps
   } = props;
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const [textLocale] = useLocale('Text');
 
   const typographyRef = React.useRef<HTMLElement>(null);
   const editIconRef = React.useRef<HTMLButtonElement>(null);
 
-  // ============================ MISC ============================
-  const prefixCls = getPrefixCls('typography', customizePrefixCls);
+  const [mergedClassNames, mergedStyles, prefixCls, direction] = useTypographySemantic(
+    customizePrefixCls,
+    classNames,
+    styles,
+    typographyDirection,
+    props,
+  );
 
   const textProps = omit(restProps, DECORATION_PROPS);
 
@@ -356,7 +399,11 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
       <button
         type="button"
         key="expand"
-        className={`${prefixCls}-${expanded ? 'collapse' : 'expand'}`}
+        className={clsx(
+          `${prefixCls}-${expanded ? 'collapse' : 'expand'}`,
+          mergedClassNames.action,
+        )}
+        style={mergedStyles.action}
         onClick={(e) => onExpandClick(e!, { expanded: !expanded })}
         aria-label={expanded ? textLocale.collapse : textLocale?.expand}
       >
@@ -381,7 +428,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
         <button
           type="button"
           ref={editIconRef}
-          className={`${prefixCls}-edit`}
+          className={clsx(`${prefixCls}-edit`, mergedClassNames.action)}
+          style={mergedStyles.action}
           onClick={onEditClick}
           aria-label={ariaLabel}
           tabIndex={tabIndex}
@@ -408,6 +456,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
         onCopy={onCopyClick}
         loading={copyLoading}
         iconOnly={!isNonNullable(children)}
+        className={mergedClassNames.action}
+        style={mergedStyles.action}
       />
     );
   };
@@ -424,7 +474,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     return (
       <span
         key="operations"
-        className={`${prefixCls}-actions`}
+        className={clsx(`${prefixCls}-actions`, mergedClassNames.actions)}
+        style={mergedStyles.actions}
         onMouseEnter={() => setIsHoveringOperations(true)}
         onMouseLeave={() => setIsHoveringOperations(false)}
       >
@@ -474,6 +525,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
               },
               className,
             )}
+            classNames={classNames}
+            styles={styles}
             prefixCls={customizePrefixCls}
             style={{
               ...style,

components/typography/Typography.tsx

@@ -3,77 +3,120 @@ import type { JSX } from 'react';
 import { clsx } from 'clsx';
 
 import type { DirectionType } from '../config-provider';
-import { useComponentConfig } from '../config-provider/context';
+import type {
+  BaseTypographyProps,
+  TypographySemanticClassNames,
+  TypographySemanticStyles,
+} from './Base';
+import { useTypographySemantic } from './hooks/useTypographySemantic';
 import useStyle from './style';
 
 export interface TypographyProps<C extends keyof JSX.IntrinsicElements>
-  extends React.HTMLAttributes<HTMLElement> {
-  id?: string;
-  prefixCls?: string;
+  extends BaseTypographyProps {
+  /** @internal */
+  component?: C;
+}
+
+interface InternalProps {
   className?: string;
   rootClassName?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
-  /** @internal */
-  component?: C;
-  'aria-label'?: string;
+  component?: keyof JSX.IntrinsicElements;
   direction?: DirectionType;
+  classNames?: TypographySemanticClassNames;
+  styles?: TypographySemanticStyles;
+  prefixCls: string;
 }
 
-interface InternalTypographyProps<C extends keyof JSX.IntrinsicElements>
-  extends TypographyProps<C> {}
-
-const Typography = React.forwardRef<
-  HTMLElement,
-  InternalTypographyProps<keyof JSX.IntrinsicElements>
->((props, ref) => {
+const InternalTypography = React.forwardRef<HTMLElement, InternalProps>((props, ref) => {
   const {
-    prefixCls: customizePrefixCls,
     component: Component = 'article',
     className,
     rootClassName,
     children,
-    direction: typographyDirection,
+    direction,
     style,
+    classNames,
+    styles,
+    prefixCls,
     ...restProps
   } = props;
 
-  const {
-    getPrefixCls,
-    direction: contextDirection,
-    className: contextClassName,
-    style: contextStyle,
-  } = useComponentConfig('typography');
-
-  const direction = typographyDirection ?? contextDirection;
-  const prefixCls = getPrefixCls('typography', customizePrefixCls);
-
-  // Style
   const [hashId, cssVarCls] = useStyle(prefixCls);
+
   const componentClassName = clsx(
     prefixCls,
-    contextClassName,
+    hashId,
+    cssVarCls,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
     rootClassName,
-    hashId,
-    cssVarCls,
+    classNames?.root,
   );
 
-  const mergedStyle: React.CSSProperties = { ...contextStyle, ...style };
+  const mergedStyle: React.CSSProperties = {
+    ...styles?.root,
+    ...style,
+  };
 
   return (
     // @ts-expect-error: Expression produces a union type that is too complex to represent.
-    <Component className={componentClassName} style={mergedStyle} ref={ref} {...restProps}>
+    <Component {...restProps} className={componentClassName} style={mergedStyle} ref={ref}>
       {children}
     </Component>
   );
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  InternalTypography.displayName = 'InternalTypography';
+}
+
+const Typography = React.forwardRef<HTMLElement, TypographyProps<keyof JSX.IntrinsicElements>>(
+  (props, ref) => {
+    const {
+      prefixCls: customizePrefixCls,
+      className,
+      rootClassName,
+      children,
+      direction: typographyDirection,
+      style,
+      classNames,
+      styles,
+      ...restProps
+    } = props;
+
+    const [mergedClassNames, mergedStyles, prefixCls, direction] = useTypographySemantic(
+      customizePrefixCls,
+      classNames,
+      styles,
+      typographyDirection,
+      props,
+    );
+
+    return (
+      <InternalTypography
+        ref={ref}
+        component="article"
+        className={clsx(className, rootClassName)}
+        direction={direction}
+        style={style}
+        classNames={mergedClassNames}
+        styles={mergedStyles}
+        prefixCls={prefixCls}
+        {...restProps}
+      >
+        {children}
+      </InternalTypography>
+    );
+  },
+);
+
 if (process.env.NODE_ENV !== 'production') {
   Typography.displayName = 'Typography';
 }
 
 export default Typography;
+export { InternalTypography };

components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -59,7 +59,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
     <ul>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/proximity"
         >
           Principles
@@ -67,7 +67,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/overview"
         >
           Patterns
@@ -75,7 +75,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/resources"
         >
           Resource Download
@@ -163,7 +163,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
     <ul>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/proximity-cn"
         >
           设计原则
@@ -171,7 +171,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/overview-cn"
         >
           设计模式
@@ -179,7 +179,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/resources-cn"
         >
           设计资源
@@ -272,7 +272,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/proximity"
           >
             Principles
@@ -280,7 +280,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/overview"
           >
             Patterns
@@ -288,7 +288,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/resources"
           >
             Resource Download
@@ -371,7 +371,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/proximity-cn"
           >
             设计原则
@@ -379,7 +379,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/overview-cn"
           >
             设计模式
@@ -387,7 +387,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/resources-cn"
           >
             设计资源
@@ -422,17 +422,17 @@ Array [
     </div>
   </article>,
   <span
-    class="ant-typography ant-typography-success css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-success"
   >
     Success but red
   </span>,
   <span
-    class="ant-typography ant-typography-warning css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-warning"
   >
     Warning but green
   </span>,
   <span
-    class="ant-typography ant-typography-danger css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-danger"
   >
     Danger but blue
   </span>,
@@ -834,7 +834,7 @@ Array [
   </div>,
   <div
     aria-label="This is a loooooooooooooooooooooooooooooooong editable text with suffix."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
   >
     This is a loooooooooooooooooooooooooooooooong editable text with suffix.
     <span
@@ -1588,20 +1588,20 @@ Array [
     </span>
   </button>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <div
     aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style=""
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
     aria-describedby="test-id"
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width: 200px;"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.
@@ -1628,7 +1628,7 @@ Array [
   </div>,
   <span
     aria-describedby="test-id"
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width: 200px;"
   >
     <code>
@@ -1740,7 +1740,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx extend conte
   </div>
   <div
     aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style=""
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
@@ -1931,7 +1931,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample 
     <span
@@ -1949,7 +1949,7 @@ Array [
   </div>,
   <span
     aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style="max-width: 400px; font-size: 24px;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -2007,7 +2007,7 @@ Array [
   <br />,
   <span
     aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style="max-width: 400px; font-size: 12px;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -2065,7 +2065,7 @@ Array [
   <br />,
   <span
     aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style="width: 400px; font-size: 24px;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -2123,7 +2123,7 @@ Array [
   <br />,
   <span
     aria-label="Ant Design is a design language for background applications, is refined by Ant UED Team."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style="width: 100px;"
   >
     Ant Design is a design language for background applications, is refined by Ant UED Team.
@@ -2181,7 +2181,7 @@ Array [
   <p>
     [Before]
     <span
-      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     >
       not ellipsis
     </span>
@@ -2192,7 +2192,7 @@ Array [
   >
     <span
       aria-describedby="test-id"
-      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
       style="width: 100px;"
     >
       默认 display none 样式的超长文字， 悬停 tooltip 失效了
@@ -2219,7 +2219,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style="width: 300px;"
   >
     In the process of internal desktop applications development,
@@ -2238,7 +2238,7 @@ Array [
     - render like this
     - and this
   and that"
-      class="ant-typography ant-typography-ellipsis css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis"
       style=""
     >
       this is a multiline
@@ -2252,7 +2252,7 @@ Array [
   <br />,
   <span
     aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     style="width: 100px; white-space: nowrap;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -2326,7 +2326,7 @@ Array [
     <span
       aria-describedby="test-id"
       aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
-      class="ant-typography ant-typography-ellipsis css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis"
       style="width: 280px; display: block;"
     >
       In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -2410,7 +2410,7 @@ exports[`renders components/typography/demo/ellipsis-debug.tsx extend context co
 exports[`renders components/typography/demo/ellipsis-middle.tsx extend context correctly 1`] = `
 <span
   aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of "
-  class="ant-typography ant-typography-ellipsis css-var-test-id"
+  class="ant-typography css-var-test-id ant-typography-ellipsis"
   style="max-width: 100%;"
 >
   In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -2430,7 +2430,7 @@ exports[`renders components/typography/demo/link-danger-debug.tsx extend context
   </span>
   <br />
   <a
-    class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-danger ant-typography-link"
     href="https://ant.design"
   >
     Danger Link
@@ -2713,7 +2713,7 @@ Array [
   </div>,
   <div
     aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
-    class="ant-typography ant-typography-ellipsis css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis"
     title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
   >
     To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
@@ -2740,7 +2740,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-secondary css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-secondary"
     >
       Ant Design (secondary)
     </span>
@@ -2749,7 +2749,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-success css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-success"
     >
       Ant Design (success)
     </span>
@@ -2758,7 +2758,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-warning css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-warning"
     >
       Ant Design (warning)
     </span>
@@ -2767,7 +2767,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-danger css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-danger"
     >
       Ant Design (danger)
     </span>
@@ -2776,7 +2776,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-disabled css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-disabled"
     >
       Ant Design (disabled)
     </span>
@@ -2862,7 +2862,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
     class="ant-space-item"
   >
     <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-link"
       href="https://ant.design"
       rel="noopener noreferrer"
       target="_blank"

components/typography/__tests__/__snapshots__/demo-semantic.test.tsx.snap

@@ -0,0 +1,379 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders components/typography/demo/_semantic.tsx correctly 1`] = `
+<div
+  class="acss-1ucck97"
+>
+  <div
+    class="ant-row css-var-test-id"
+  >
+    <div
+      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
+    >
+      <div
+        aria-label="Ant Design is a design language for background applications, refined by Ant UED Team. It aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development."
+        class="ant-typography css-var-test-id ant-typography-ellipsis semantic-mark-root"
+        style=""
+      >
+        Ant Design is a design language for background applications, refined by Ant UED Team. It aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
+        <span
+          class="ant-typography-actions semantic-mark-actions"
+        >
+          <button
+            aria-label="Edit"
+            class="ant-typography-edit semantic-mark-action"
+            type="button"
+          >
+            <span
+              aria-label="edit"
+              class="anticon anticon-edit"
+              role="button"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="edit"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            aria-label="Copy"
+            class="ant-typography-copy semantic-mark-action"
+            type="button"
+          >
+            <span
+              aria-label="copy"
+              class="anticon anticon-copy"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="copy"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-8 css-var-test-id"
+    >
+      <ul
+        class="acss-1ry21g5"
+      >
+        <li
+          class="acss-1ehfz5v"
+        >
+          <div
+            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+          >
+            <div
+              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
+            >
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <h5
+                  class="ant-typography css-var-test-id"
+                  style="margin: 0px;"
+                >
+                  root
+                </h5>
+                <span
+                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
+                >
+                  6.4.0
+                </span>
+              </div>
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="pushpin"
+                      class="anticon anticon-pushpin"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="pushpin"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="info-circle"
+                      class="anticon anticon-info-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="info-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                        />
+                        <path
+                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="ant-typography css-var-test-id"
+              style="margin: 0px; font-size: 12px;"
+            >
+              根元素，包含排版基础样式、布局和定位
+            </div>
+          </div>
+        </li>
+        <li
+          class="acss-1ehfz5v"
+        >
+          <div
+            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+          >
+            <div
+              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
+            >
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <h5
+                  class="ant-typography css-var-test-id"
+                  style="margin: 0px;"
+                >
+                  actions
+                </h5>
+                <span
+                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
+                >
+                  6.4.0
+                </span>
+              </div>
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="pushpin"
+                      class="anticon anticon-pushpin"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="pushpin"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="info-circle"
+                      class="anticon anticon-info-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="info-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                        />
+                        <path
+                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="ant-typography css-var-test-id"
+              style="margin: 0px; font-size: 12px;"
+            >
+              操作区域元素，包含复制、编辑、展开/收起等操作按钮的布局和间距样式
+            </div>
+          </div>
+        </li>
+        <li
+          class="acss-1ehfz5v"
+        >
+          <div
+            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+          >
+            <div
+              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
+            >
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <h5
+                  class="ant-typography css-var-test-id"
+                  style="margin: 0px;"
+                >
+                  action
+                </h5>
+                <span
+                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
+                >
+                  6.4.0
+                </span>
+              </div>
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="pushpin"
+                      class="anticon anticon-pushpin"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="pushpin"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="info-circle"
+                      class="anticon anticon-info-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="info-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                        />
+                        <path
+                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="ant-typography css-var-test-id"
+              style="margin: 0px; font-size: 12px;"
+            >
+              单个操作按钮元素，包括复制、编辑、展开、收起按钮的样式，如内边距、圆角、颜色等
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;

components/typography/__tests__/__snapshots__/demo.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
     <ul>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/proximity"
         >
           Principles
@@ -68,7 +68,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/overview"
         >
           Patterns
@@ -76,7 +76,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/resources"
         >
           Resource Download
@@ -164,7 +164,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
     <ul>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/proximity-cn"
         >
           设计原则
@@ -172,7 +172,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/spec/overview-cn"
         >
           设计模式
@@ -180,7 +180,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
       </li>
       <li>
         <a
-          class="ant-typography ant-typography-link css-var-test-id"
+          class="ant-typography css-var-test-id ant-typography-link"
           href="/docs/resources-cn"
         >
           设计资源
@@ -272,7 +272,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/proximity"
           >
             Principles
@@ -280,7 +280,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/overview"
           >
             Patterns
@@ -288,7 +288,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/resources"
           >
             Resource Download
@@ -371,7 +371,7 @@ Array [
       <ul>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/proximity-cn"
           >
             设计原则
@@ -379,7 +379,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/spec/overview-cn"
           >
             设计模式
@@ -387,7 +387,7 @@ Array [
         </li>
         <li>
           <a
-            class="ant-typography ant-typography-link css-var-test-id"
+            class="ant-typography css-var-test-id ant-typography-link"
             href="/docs/resources-cn"
           >
             设计资源
@@ -422,17 +422,17 @@ Array [
     </div>
   </article>,
   <span
-    class="ant-typography ant-typography-success css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-success"
   >
     Success but red
   </span>,
   <span
-    class="ant-typography ant-typography-warning css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-warning"
   >
     Warning but green
   </span>,
   <span
-    class="ant-typography ant-typography-danger css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-danger"
   >
     Danger but blue
   </span>,
@@ -684,7 +684,7 @@ Array [
     </span>
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
   >
     This is a loooooooooooooooooooooooooooooooong editable text 
     <!-- -->
@@ -1190,24 +1190,24 @@ Array [
     </span>
   </button>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
     style="-webkit-line-clamp:2"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width:200px"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.
   </span>,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width:200px"
   >
     <code>
@@ -1275,7 +1275,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
     </div>
   </div>
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
     style="-webkit-line-clamp:2"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
@@ -1422,7 +1422,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample
     <!-- -->
@@ -1441,7 +1441,7 @@ Array [
     case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
   </div>,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="max-width:400px;font-size:24px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1477,7 +1477,7 @@ Array [
   </span>,
   <br />,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="max-width:400px;font-size:12px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1513,7 +1513,7 @@ Array [
   </span>,
   <br />,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width:400px;font-size:24px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1549,7 +1549,7 @@ Array [
   </span>,
   <br />,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width:100px"
   >
     Ant Design is a design language for background applications, is refined by Ant UED Team.
@@ -1586,7 +1586,7 @@ Array [
   <p>
     [Before]
     <span
-      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     >
       not ellipsis
     </span>
@@ -1596,14 +1596,14 @@ Array [
     style="display:none"
   >
     <span
-      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
       style="width:100px"
     >
       默认 display none 样式的超长文字， 悬停 tooltip 失效了
     </span>
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
     style="width:300px;-webkit-line-clamp:3"
   >
     In the process of internal desktop applications development,
@@ -1616,7 +1616,7 @@ Array [
   </div>,
   <pre>
     <div
-      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
       style="-webkit-line-clamp:2"
     >
       this is a multiline
@@ -1629,7 +1629,7 @@ Array [
   </pre>,
   <br />,
   <span
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     style="width:100px;white-space:nowrap"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1680,7 +1680,7 @@ Array [
       3. Move from copy button back to the text (without leaving the block) → ellipsis tooltip should show again.
     </div>
     <span
-      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
       style="width:280px;display:block"
     >
       In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
@@ -1720,7 +1720,7 @@ Array [
 
 exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] = `
 <span
-  class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+  class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
   style="max-width:100%"
 >
   In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of 
@@ -1740,7 +1740,7 @@ exports[`renders components/typography/demo/link-danger-debug.tsx correctly 1`]
   </span>
   <br />
   <a
-    class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-danger ant-typography-link"
     href="https://ant.design"
   >
     Danger Link
@@ -1997,7 +1997,7 @@ Array [
     />
   </div>,
   <div
-    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
+    class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
     title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
   >
     To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life
@@ -2024,7 +2024,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-secondary css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-secondary"
     >
       Ant Design (secondary)
     </span>
@@ -2033,7 +2033,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-success css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-success"
     >
       Ant Design (success)
     </span>
@@ -2042,7 +2042,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-warning css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-warning"
     >
       Ant Design (warning)
     </span>
@@ -2051,7 +2051,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-danger css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-danger"
     >
       Ant Design (danger)
     </span>
@@ -2060,7 +2060,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <span
-      class="ant-typography ant-typography-disabled css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-disabled"
     >
       Ant Design (disabled)
     </span>
@@ -2146,7 +2146,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <a
-      class="ant-typography ant-typography-link css-var-test-id"
+      class="ant-typography css-var-test-id ant-typography-link"
       href="https://ant.design"
       rel="noopener noreferrer"
       target="_blank"

components/typography/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,24 +2,24 @@
 
 exports[`Typography rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-typography ant-typography-rtl css-var-root"
+  class="ant-typography css-var-root ant-typography-rtl"
 />
 `;
 
 exports[`Typography rtl render component should be rendered correctly in RTL direction 2`] = `
 <article
-  class="ant-typography ant-typography-rtl css-var-root"
+  class="ant-typography css-var-root ant-typography-rtl"
 />
 `;
 
 exports[`Typography rtl render component should be rendered correctly in RTL direction 3`] = `
 <h1
-  class="ant-typography ant-typography-rtl css-var-root"
+  class="ant-typography css-var-root ant-typography-rtl"
 />
 `;
 
 exports[`Typography rtl render component should be rendered correctly in RTL direction 4`] = `
 <a
-  class="ant-typography ant-typography-rtl ant-typography-link css-var-root"
+  class="ant-typography css-var-root ant-typography-rtl ant-typography-link"
 />
 `;

components/typography/__tests__/demo-semantic.test.tsx

@@ -0,0 +1,3 @@
+import { semanticDemoTest } from '../../../tests/shared/demoTest';
+
+semanticDemoTest('typography');

components/typography/__tests__/semantic.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { clsx } from 'clsx';
+
+import Typography from '..';
+import { render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
+import type { TypographyClassNamesType, TypographyStylesType } from '../Base';
+
+describe('Typography.Semantic', () => {
+  it('should support classNames and styles for root, actions, and action', () => {
+    const classNamesFn: TypographyClassNamesType = jest.fn(() => ({
+      root: 'custom-typography',
+      actions: 'custom-actions',
+      action: 'custom-action',
+    }));
+
+    const stylesFn: TypographyStylesType = jest.fn(() => ({
+      root: { color: '#1890ff' },
+      actions: { backgroundColor: '#f0f0f0' },
+      action: { padding: '5px' },
+    }));
+
+    const { rerender } = render(
+      <Typography.Paragraph classNames={classNamesFn} styles={stylesFn} copyable>
+        Test Typography
+      </Typography.Paragraph>,
+    );
+
+    expect(classNamesFn).toHaveBeenCalled();
+    expect(stylesFn).toHaveBeenCalled();
+
+    const rootElement = document.querySelector<HTMLElement>('.ant-typography');
+    expect(rootElement).toHaveClass('custom-typography');
+    expect(rootElement).toHaveStyle({ color: 'rgb(24, 144, 255)' });
+
+    const actionsElement = document.querySelector<HTMLElement>('.ant-typography-actions');
+    expect(actionsElement).toHaveClass('custom-actions');
+    expect(actionsElement).toHaveStyle({ backgroundColor: 'rgb(240, 240, 240)' });
+
+    const actionButton = document.querySelector<HTMLElement>('.ant-typography-actions button');
+    expect(actionButton).toHaveClass('custom-action');
+    expect(actionButton).toHaveStyle({ padding: '5px' });
+
+    rerender(
+      <Typography.Paragraph
+        classNames={{
+          root: 'obj-root',
+          actions: 'obj-actions',
+          action: 'obj-action',
+        }}
+        styles={{
+          root: { fontSize: '16px', color: '#52c41a' },
+          actions: { margin: '10px' },
+          action: { borderRadius: '4px' },
+        }}
+        copyable
+      >
+        Updated Typography
+      </Typography.Paragraph>,
+    );
+
+    const updatedRootElement = document.querySelector<HTMLElement>('.ant-typography');
+    expect(updatedRootElement).toHaveClass('obj-root');
+    expect(updatedRootElement).toHaveStyle({ fontSize: '16px', color: 'rgb(82, 196, 26)' });
+
+    const updatedActionsElement = document.querySelector<HTMLElement>('.ant-typography-actions');
+    expect(updatedActionsElement).toHaveClass('obj-actions');
+    expect(updatedActionsElement).toHaveStyle({ margin: '10px' });
+
+    const updatedActionButton = document.querySelector<HTMLElement>(
+      '.ant-typography-actions button',
+    );
+    expect(updatedActionButton).toHaveClass('obj-action');
+    expect(updatedActionButton).toHaveStyle({ borderRadius: '4px' });
+  });
+
+  it('should merge context and component classNames and styles', () => {
+    const contextClassNames: TypographyClassNamesType = {
+      root: 'context-root',
+      actions: 'context-actions',
+    };
+    const contextStyles: TypographyStylesType = {
+      root: { padding: '10px' },
+      actions: { margin: '5px' },
+    };
+    const componentClassNames: TypographyClassNamesType = {
+      root: 'component-root',
+    };
+    const componentStyles: TypographyStylesType = {
+      root: { fontSize: '14px' },
+    };
+
+    render(
+      <ConfigProvider>
+        <ConfigProvider
+          typography={{
+            className: undefined,
+            style: undefined,
+            classNames: contextClassNames,
+            styles: contextStyles,
+          }}
+        >
+          <Typography.Paragraph classNames={componentClassNames} styles={componentStyles} copyable>
+            Test Typography
+          </Typography.Paragraph>
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+
+    const rootElement = document.querySelector<HTMLElement>('.ant-typography');
+    const actionsElement = document.querySelector<HTMLElement>('.ant-typography-actions');
+
+    expect(rootElement).toHaveClass(clsx(contextClassNames.root, componentClassNames.root));
+    expect(actionsElement).toHaveClass(contextClassNames.actions!);
+
+    expect(rootElement).toHaveStyle({
+      padding: contextStyles.root?.padding,
+      fontSize: componentStyles.root?.fontSize,
+    });
+    expect(actionsElement).toHaveStyle({ margin: contextStyles.actions?.margin });
+  });
+});

components/typography/demo/_semantic.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Typography } from 'antd';
+
+import useLocale from '../../../.dumi/hooks/useLocale';
+import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
+
+const locales = {
+  cn: {
+    root: '根元素，包含排版基础样式、布局和定位',
+    actions: '操作区域元素，包含复制、编辑、展开/收起等操作按钮的布局和间距样式',
+    action: '单个操作按钮元素，包括复制、编辑、展开、收起按钮的样式，如内边距、圆角、颜色等',
+  },
+  en: {
+    root: 'Root element with base typography styles, layout, and positioning',
+    actions:
+      'Actions element with layout and spacing styles for copy, edit, expand/collapse buttons',
+    action:
+      'Individual action button element including copy, edit, expand, collapse button styles like padding, border radius, colors, etc.',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      componentName="Typography"
+      semantics={[
+        { name: 'root', desc: locale.root, version: '6.4.0' },
+        { name: 'actions', desc: locale.actions, version: '6.4.0' },
+        { name: 'action', desc: locale.action, version: '6.4.0' },
+      ]}
+    >
+      <Typography.Paragraph copyable editable ellipsis={{ rows: 2, expandable: true }}>
+        Ant Design is a design language for background applications, refined by Ant UED Team. It
+        aims to uniform the user interface specs for internal background projects, lower the
+        unnecessary cost of design differences and implementation and liberate the resources of
+        design and front-end development.
+      </Typography.Paragraph>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/typography/hooks/useTypographySemantic.ts

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+
+import { useMergeSemantic } from '../../_util/hooks';
+import type { DirectionType } from '../../config-provider';
+import { useComponentConfig } from '../../config-provider/context';
+import type {
+  BaseTypographyProps,
+  TypographyClassNamesType,
+  TypographySemanticClassNames,
+  TypographySemanticStyles,
+  TypographyStylesType,
+} from '../Base';
+
+type UseTypographySemanticResult = [
+  mergedClassNames: TypographySemanticClassNames,
+  mergedStyles: TypographySemanticStyles,
+  prefixCls: string,
+  direction: DirectionType | undefined,
+];
+
+export const useTypographySemantic = (
+  customizePrefixCls?: string,
+  classNames?: TypographyClassNamesType | undefined,
+  styles?: TypographyStylesType | undefined,
+  typographyDirection?: DirectionType,
+  props?: BaseTypographyProps,
+): UseTypographySemanticResult => {
+  const {
+    getPrefixCls,
+    direction: contextDirection,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
+  } = useComponentConfig('typography');
+
+  const direction = typographyDirection ?? contextDirection;
+  const prefixCls = getPrefixCls('typography', customizePrefixCls);
+
+  const mergedProps: BaseTypographyProps = {
+    ...props,
+    prefixCls,
+    direction,
+  };
+
+  const contextClassNamesObject = useMemo(() => ({ root: contextClassName }), [contextClassName]);
+  const contextStylesObject = useMemo(() => ({ root: contextStyle }), [contextStyle]);
+
+  const [mergedClassNames, mergedStyles] = useMergeSemantic<
+    TypographyClassNamesType,
+    TypographyStylesType,
+    BaseTypographyProps
+  >(
+    [contextClassNamesObject, contextClassNames, classNames],
+    [contextStylesObject, contextStyles, styles],
+    {
+      props: mergedProps,
+    },
+  );
+
+  return [mergedClassNames, mergedStyles, prefixCls, direction];
+};

components/typography/index.tsx

@@ -4,14 +4,16 @@ import Text from './Text';
 import Title from './Title';
 import OriginTypography from './Typography';
 
-export type TypographyProps = typeof OriginTypography & {
+export type { TypographyProps } from './Typography';
+
+type CompoundedComponent = typeof OriginTypography & {
   Text: typeof Text;
   Link: typeof Link;
   Title: typeof Title;
   Paragraph: typeof Paragraph;
 };
 
-const Typography = OriginTypography as TypographyProps;
+const Typography = OriginTypography as CompoundedComponent;
 Typography.Text = Text;
 Typography.Link = Link;
 Typography.Title = Title;