Ant Design Mentions 组件尺寸（size）配置指南：三档尺寸、上下文继承与样式实现解析

本指南以 ant-design 仓库中 Mentions 尺寸演示文档 为主体，围绕 Mentions（提及输入框）的 size 属性展开。你将掌握 large / medium / small 三档尺寸的具体用法、尺寸如何从 ConfigProvider / Form 上下文自动继承（无需逐组件声明），以及尺寸类名在样式层（CSS-in-JS）中的落地原理与测试验证方式，可直接迁移到真实表单与评论发布等场景。

Mentions 的 size 演示：一个最小可用的三尺寸示例

在 components/mentions/demo/size.md 中，官方对该演示给出的说明只有一句话：「通过 size 属性配置大小 / Configure size via size property」。真正承载行为的是与它同名的演示源码 components/mentions/demo/size.tsx：

import React from 'react';
import { Flex, Mentions } from 'antd';

const App: React.FC = () => (
  <Flex vertical gap="medium">
    <Mentions size="large" placeholder="large size" />
    <Mentions placeholder="default size" />
    <Mentions size="small" placeholder="small size" />
  </Flex>
);

export default App;

这段代码通过 Flex vertical 将三个 Mentions 纵向排布，构成组件「大 / 默认 / 小」三种尺寸的直观对照：

• 第一行显式声明 size="large"，输入框采用大号控件高度；
• 第二行不传 size，此时渲染结果即为默认（medium）尺寸；
• 第三行显式声明 size="small"，输入框采用紧凑的小号控件高度。

该演示在 Mentions 官方文档首页 中以「尺寸」条目挂载，标注引入版本为 6.0.0（对应源码行 <code src="./demo/size.tsx" version="6.0.0">尺寸</code>），说明从 v6 起 size 已成为官方推荐的尺寸配置入口。

size 属性取值与优先级：组件级配置优先，其次上下文继承

在 Mentions API 表格 中，size 的定义如下：

参数	说明	类型	默认值
size	控件大小	large | medium | small	-

需要注意两点：

1. 三档命名：合法取值是 large、medium、small。其中 medium 是默认尺寸（不传时即呈现该档）。历史版本中常用的 middle 在 v6 中已被标记为废弃别名——见 SizeContext 类型定义 中的注释：middle is deprecated and will be removed in v7, please use medium instead，即 middle 将在 v7 中被移除，新代码应统一书写 medium。
2. 默认值是「继承」而非写死：API 表中默认值为 -，意味着 size 与多数输入类组件一样，遵循「组件属性 > 上下文 > 全局默认」的取值链。

在 Mentions 组件实现 中，尺寸解析由 config-provider 提供的 useSize Hook 完成：

// components/mentions/index.tsx
const mergedSize = useSize((ctx) => customSize ?? ctx);

而 useSize 的实现位于 components/config-provider/hooks/useSize.ts：它通过 React.useContext(SizeContext) 读取上层注入的尺寸，只有当组件自身没有传 customSize 时才回退到上下文值，即 Mentions 实例上显式声明的 size 拥有最高优先级。这正是 demo 中「大 / 默认 / 小」三档能够并存展示的原因：它们在同一上下文下各自通过组件属性覆盖。

让尺寸自动「长」出来：ConfigProvider 与 Form 的上下文联动

由于 useSize 消费的是 React Context，因此你不必在每个 Mentions 上手动写 size，而可以在更上层统一管理：

import { ConfigProvider, Mentions } from 'antd';

// 全局把尺寸统一为 small：所有未显式声明 size 的输入组件都会变小
<ConfigProvider componentSize="small">
  <Mentions options={[{ value: 'AF' }]} placeholder="全局 small 尺寸" />
</ConfigProvider>

其原理是 SizeContextProvider 将 componentSize 写入 SizeContext；同时 Form 的 size 属性、Space / Flex 中的尺寸上下文最终也都会汇聚到同一个 Provider 上。所以常见的最佳实践是：

• 单个表单整体调小/调大：直接在 <Form size="small"> 上声明，内部所有 Mentions 自动跟随；
• 个别字段特殊尺寸：在该 Mentions 上单独传 size="large" 覆盖上下文。

这样 demo 中「默认 size」一行渲染出的就是最贴近多数使用场景的「跟随上下文」形态。

尺寸类名的落地：从 ant-mentions-lg / ant-mentions-sm 到 CSS 变量

组件解析出 mergedSize 之后，会在 index.tsx 的合并 className 逻辑中追加尺寸类名：

{
  [`${prefixCls}-sm`]: mergedSize === 'small',
  [`${prefixCls}-lg`]: mergedSize === 'large',
}

即在默认前缀 ant-mentions 下，最终生成 ant-mentions-lg（large）与 ant-mentions-sm（small）两个修饰类；而 medium 尺寸不产生额外类名。这些类名的样式定义位于 components/mentions/style/index.ts：

'&-lg': {
  [varName('padding-inline')]: token.paddingInlineLG,
  [varName('padding-block')]: token.paddingBlockLG,
  [varName('control-height')]: token.controlHeightLG,
},
'&-sm': {
  [varName('padding-inline')]: token.paddingInlineSM,
  [varName('padding-block')]: token.paddingBlockSM,
  [varName('control-height')]: token.controlHeightSM,
},

可以看到，尺寸变化并非简单改一行 height，而是通过 genCssVar 生成 --padding-inline、--padding-block、--control-height 三个 CSS 变量（见同文件 genMentionsStyle 中定义的 cmp-mentions 变量组），分别对应输入控件横向内边距、纵向内边距与总高度三组主题 Token：

• large 使用 *LG 后缀的 Token（paddingInlineLG、paddingBlockLG、controlHeightLG）；
• small 使用 *SM 后缀的 Token；
• medium（默认）使用基础 Token。

<textarea> 的 min-height 通过 calc(control-height - 2 * line-width) 计算得出（见 style/index.ts），所以切换尺寸时输入框高度、内边距与占位符位置会整体联动，而不会出现文字与边框错位。此外 Mentions 直接复用了 input 的尺寸 Token 体系，因此它与 Input、Select 等输入组件在视觉上是同一套尺度标准。

用快照测试验证三种尺寸的实际 DOM 输出

仓库为 demo 目录的每个演示都生成了快照测试。在 components/mentions/tests/snapshots/demo.test.tsx.snap 中可以找到 renders components/mentions/demo/size.tsx correctly 的断言：

class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-lg"   // large，placeholder="large size"
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var"                 // 默认 medium，无 lg/sm 类
class="ant-mentions ant-mentions-outlined ant-mentions css-var-test-id ant-mentions-css-var ant-mentions-sm"  // small，placeholder="small size"

这段快照从测试层面印证了三个事实：

1. 显式 size="large" / size="small" 分别产生 ant-mentions-lg / ant-mentions-sm 类名；
2. 未传 size 的 Mentions 不生成任何尺寸修饰类，渲染为默认 medium 高度；
3. 尺寸类与形态类（ant-mentions-outlined，来自默认 variant="outlined"）、CSS 变量类（ant-mentions-css-var）互不冲突、可同时共存。

同名断言也存在于 demo-extend.test.ts.snap 中（针对扩展主题场景），说明该行为在不同主题 token 环境下保持一致。此外，Mentions 的 API 表格 还提示 size 无法通过 ConfigProvider 的 componentConfig 全局配置（该列标记为「×」），这与它本身走 SizeContext 继承的机制相符。

实操小结与常见注意点

• 三档取值记忆：large（高）、medium（默认，可省略）、small（紧凑）；middle 属废弃别名，v7 将移除，勿用于新代码。
• 何时显式声明 size：需要与同一上下文中其他输入组件尺寸区分时（如评论框中「大号输入框」+「小号操作按钮」的组合），才在 Mentions 上单独声明；否则交给 ConfigProvider componentSize 或 Form size 统一管理，更易维护。
• 样式副作用范围：size 同时影响控件高度、内边距与占位符排布；若自定义主题时调整了 controlHeight* / paddingInline* 等 Token，三档尺寸会按比例同步生效。
• 与 autoSize 的组合：autoSize 控制的是多行内容区的高度自适应，与 size 控制单行控件整体高度互不冲突，可按需叠加使用。