企业官网建设流程全解析

• 前端
• UI组件

本篇指南聚焦 React 组件库 RSuite 中NumberInput（数字输入框）的size属性，讲解lg、md、sm、xs四种尺寸的完整用法、默认行为，并结合源码剖析尺寸属性如何从组件层传递到 InputGroup、Button 与触摸微调按钮，最终落到 CSS 变量的渲染链路。读完本文，你将能在表单、筛选面板、后台配置页等场景中精准选择数字输入框的尺寸，并理解其底层样式机制。

一、官方示例：四种尺寸一览

RSuite 官方文档（docs/pages/components/number-input/fragments/size.md）中给出的尺寸示例非常简洁：在同一列中依次渲染lg、md、sm、xs四种规格的NumberInput，并用placeholder标注各自的尺寸名称，便于肉眼对比高度差异：

import { NumberInput, VStack } from 'rsuite'; const App = () => ( <VStack spacing={10} w={200}> <NumberInput size="lg" placeholder="lg" /> <NumberInput size="md" placeholder="md" /> <NumberInput size="sm" placeholder="sm" /> <NumberInput size="xs" placeholder="xs" /> </VStack> ); ReactDOM.render(<App />, document.getElementById('root'));

要点说明：

• 示例使用VStack（RSuite 的纵向 Flex 布局组件）垂直排列四个输入框，spacing={10}控制框间间距为 10px，w={200}固定列宽为 200px，这正是实测尺寸差异的最小可运行模板；
• placeholder在本文中兼作尺寸标签，实际开发中可替换为业务提示语（如"请输入数量"）；
• 与基础示例（basic.md）相比，这里唯一的变化就是传入了size属性，可见尺寸调整对调用方而言是零成本的。

二、size 属性的类型与默认值

在 NumberInput.tsx 中，size的类型被定义为BasicSize，取值集合为'lg' | 'md' | 'sm' | 'xs'，与官方 Props 表格（en-US/index.md）一致。

关于默认值需要特别注意：

• 官方 Props 表格标注默认值为'md'；
• 在 NumberInput.tsx 的解构逻辑中，size并未像step = 1、controls = true那样设置显式默认值，而是透传给InputGroup，由 InputGroup 内部兜底为md。

因此，不传size时渲染出的就是中等尺寸，绝大多数表单场景无需显式声明。

三、尺寸属性在组件内部如何流转

从源码看，size在 NumberInput 内部被三处消费（NumberInput.tsx）：

1. 输入框容器 InputGroup：<InputGroup size={size} inside>将尺寸应用到整体容器；
2. 增加按钮（touchspin-up）：<Button size={size}>，即上方的"+"按钮；
3. 减少按钮（touchspin-down）：<Button size={size}>，即下方的"−"按钮。

也就是说，size是一个"贯穿式"属性：一次声明，同时作用于输入框主体与右侧纵向排列的步进按钮组，保证内外视觉高度一致。这也是为什么尺寸变化时，右侧的上下按钮会自动随容器缩放，而不需要额外配置。

四、底层样式机制：CSS 变量驱动的尺寸渲染

尺寸并非通过硬编码像素值实现，而是由 RSuite 的 CSS 变量体系驱动，集中定义在 src/NumberInput/styles/index.scss：

.rs-number-input { --rs-number-input-touchspin-height-xs: calc(calc(var(--rs-input-height-xs) - 2px) / 2); --rs-number-input-touchspin-height-sm: calc(calc(var(--rs-input-height-sm) - 2px) / 2); --rs-number-input-touchspin-height-md: calc(calc(var(--rs-input-height-md) - 2px) / 2); --rs-number-input-touchspin-height-lg: calc(calc(var(--rs-input-height-lg) - 2px) / 2); $sizes: xs, sm, md, lg; @each $size in $sizes { &[data-size='#{$size}'] { --rs-number-input-touchspin-height: var(--rs-number-input-touchspin-height-#{$size}); } } }

关键机制可以拆解为三层：

1. CSS 变量按尺寸预定义：每个尺寸的步进按钮高度 =（对应输入框高度 − 2px 边框）÷ 2，因为两个按钮纵向堆叠后恰好填满输入框内部高度；
2. data-size 属性选择器：Sass 循环为lg/md/sm/xs生成&[data-size='#{$size}']规则。data-size属性正是由 InputGroup 依据sizeprop 写入 DOM 的，样式与属性由此精确对应；
3. icon 高度微调：--rs-number-input-icon-height会在按钮高度基础上按索引递减 2px（$offset: ($index - 1) * 2px），保证箭头图标在按钮内垂直居中、视觉比例协调。

输入框本身则复用通用 Input 的尺寸变量（src/Input/styles/index.scss），即--rs-input-font-size-*、--rs-input-line-height-*、--rs-input-padding-block-*、--rs-input-padding-inline-*，因此NumberInput 与普通 Input 在相同尺寸下高度、字号、内边距完全一致，混排时视觉统一。

作为补充佐证，组件测试 NumberInput.spec.tsx 通过testStandardProps(<NumberInput />, { sizes: ['lg', 'md', 'sm', 'xs'] })对四种尺寸做了标准属性回归，Storybook 故事 NumberInput.stories.tsx 也单独提供了Size故事（size: 'lg'）供开发预览。

五、尺寸选择实战建议

结合 RSuite 的设计体系与组件特性，给出以下选型参考：

六、常见问题

Q：只设置 InputGroup 的 size 能联动 NumberInput 吗？可以。NumberInput 本身就是基于 InputGroup 封装的（见 NumberInput.tsx），size最终统一落到 InputGroup 的data-size属性上，所以无论从哪一侧声明，渲染结果一致。

Q：四种尺寸是否会影响数值运算能力？不会。size仅影响视觉尺寸与触控区域，与step、min、max、decimalSeparator等数值逻辑完全解耦（参见 NumberInput.tsx 的数值处理链路）。

Q：想自定义非标准尺寸怎么办？size仅接受四种枚举值。如需特殊尺寸，可在外层通过className/style覆盖.rs-number-input的高度、字号，并同步调整--rs-input-height-*类变量，但官方推荐优先使用内置四档以保持主题一致。

七、小结

NumberInput的尺寸体系是一个"小而完整"的工程闭环：开发者只需传一个size枚举，组件内部就自动完成 InputGroup 容器、输入框与上下步进按钮的统一缩放；而样式层通过data-size属性选择器与 CSS 变量计算，实现了零 JS 计算的高效渲染。掌握这四种尺寸及其背后的实现链路，你在任何表单密度要求的界面上都能快速给出合适的数字输入方案。

• 前端
• UI组件