React Suite (rsuite) v6 正式发布了。这一版本聚焦于现代化改造：重构底层样式系统、提供新的布局能力，并整体提升响应式体验和开发流程。v6 代表 React Suite 在稳定性的前提下，持续向更具适应性的 UI 方案演进。
1. 样式系统的全面重构：拥抱 CSS 变量
v6 最重大的底层变革是将样式系统从 Less 彻底迁移到了 SCSS，并全面采用 CSS 变量 (CSS Variables) 作为主题定制的核心方案。开发者只需覆盖变量值，就能在运行时动态切换品牌色、间距或圆角，无需重新编译或配置额外的构建流程。
完整的变量清单与使用方式，可参考 CSS Variables 文档，也可以借助 Palette 工具 可视化调整品牌配色。
其他样式系统改进
- **逻辑属性 (Logical Properties)**：全面采用 CSS 逻辑属性（如
margin-inline-start代替margin-left），原生支持 RTL （从右到左）排版。 - rem 单位：字体大小、间距等尺寸从
px转换为rem，更好地支持响应式排版和无障碍缩放。
2. 拥抱 AI 辅助编程
React Suite v6 不仅关注组件本身，更致力于提升 AI 时代的开发效率。我们引入了对 AI 编程助手的原生支持，让 Cursor 、Windsurf 等工具能更懂 RSuite 。
LLMs.txt 支持
我们遵循 llms.txt 标准，为文档站添加了 /llms.txt 文件。这是一个专为大语言模型 (LLM) 优化的文档索引。
当你在 Cursor 或其他 AI 工具中引用 RSuite 文档时，AI 可以通过这个文件快速获取组件的 API 定义、最佳实践和代码示例，从而生成更准确、符合 v6 规范的代码。
MCP Server 集成
我们推出了官方的 Model Context Protocol (MCP) Server 。
通过 MCP ，你的 AI 助手可以直接连接到 RSuite 的知识库。这意味着：
- 实时检索：AI 可以直接读取最新的组件文档和 API ，无需手动复制粘贴。
- 上下文感知：在编写代码时，AI 能自动推荐适合当前场景的组件和属性。
- 减少幻觉：基于官方文档的上下文投喂，大幅降低 AI 生成过时或错误代码的概率。
3. 布局能力的原子化：引入 Box 与 Center
为了让布局更加灵活高效，v6 引入了基础的布局原子组件，让开发者能够像搭积木一样构建复杂的 UI 。
Box 组件
Box 是构建布局的基石，它允许你直接在组件上通过 props 控制样式，无需编写额外的 CSS 类。
import { Box, Button } from 'rsuite';
function App() {
return (
<Box p={20} m={10} bg="gray-100" borderRadius={8} display="flex" justifyContent="space-between">
<h2>Welcome to v6</h2>
<Button appearance="primary">Get Started</Button>
</Box>
);
}
Center 组件
垂直水平居中一直是 CSS 中的高频需求，现在你可以使用 Center 组件轻松实现：
import { Center } from 'rsuite';
<Center height={200} className="bg-blue-50">
<div>Perfectly Centered Content</div>
</Center>;
4. 响应式设计的全面增强
在移动互联网时代，跨端适配至关重要。v6 对核心组件进行了响应式能力的增强。
-
Grid 系统升级：重构了
Row和Col，提供更灵活的断点控制对象语法。<Row align="center" justify="space-between"> <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col> <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col> </Row> -
**Navbar & Sidenav**：新增了对移动端的自适应支持，使用
Navbar.Content替代了废弃的pullRight，布局更清晰。<Navbar> <Navbar.Brand>BRAND</Navbar.Brand> <Navbar.Content> <Nav>...</Nav> </Navbar.Content> <Navbar.Content> <Avatar /> </Navbar.Content> </Navbar> -
Picker 组件：所有的 Picker 组件现在都拥有了更好的移动端适配体验，在小屏幕设备上会自动切换为更友好的交互模式。
5. 全新的组件与 Hooks
除了布局组件，v6 还带来了一系列实用的新组件和 Hooks ，进一步丰富了组件库的能力。
新增组件
-
SegmentedControl：分段控制器，提供更现代的选项卡切换体验，适用于筛选、视图切换等场景。
-
PasswordInput：专用的密码输入框，内置显示/隐藏密码切换功能，提升用户体验。
-
PinInput：PIN 码/验证码输入组件，支持自动聚焦和粘贴分割，适用于验证场景。
-
Textarea：独立的多行文本输入组件，提供更好的样式控制和一致性。
-
Kbd：用于展示键盘按键，文档站和快捷键提示的福音。
-
Link：提供统一样式的链接组件，支持自定义颜色和无障碍访问。
-
Form.Stack：让表单布局排列更加整洁有序，替代了 Form 组件上的布局属性。
<Form> <Form.Stack layout="horizontal" spacing={20}> <Form.Group> <Form.Label>Username</Form.Label> <Form.Control name="username" /> </Form.Group> {/* ... */} </Form.Stack> </Form>
强大的 Hooks
-
useDialog：通过函数调用方式管理对话框，告别繁琐的 visible state 管理。
const dialog = useDialog(); const handleClick = async () => { const result = await dialog.confirm({ title: '确认操作', children: '您确定要执行此操作吗？' }); if (result) { console.log('Confirmed'); } }; -
useFormControl：轻松创建自定义的表单控件，自动处理验证状态和错误信息。
6. 开发者体验 (DX) 的极致追求
我们深知开发者的快乐不仅仅来自于好用的组件，更来自于流畅的开发流程。
- 全面拥抱 Vitest：我们将测试框架从 Karma/Mocha 迁移到了 Vitest ，测试速度大幅提升，开发反馈更加即时。
- TypeScript 类型增强：优化了所有组件的类型导出，新增 Schema 类型命名导出，智能提示更加精准。
-
Bundle Size 优化：
- 引入 size-limit ，严格把控包体积。
- 生态支持：新增 Bun 安装指南，紧跟前端工具链发展潮流。
- 开发调试：
useToaster增加了环境检查，当在CustomProvider上下文之外使用时会发出友好警告，帮助快速定位问题。
7. 更多细节改进
-
Badge：新增
size、outline、placement等属性，支持更丰富的展示形态。<Badge content="New" size="lg" outline /> <Badge content={99} shape="square" placement="bottomEnd" /> -
Breadcrumb：默认样式调整，更符合现代设计规范。
-
DatePicker：优化了 Toolbar 布局，交互更符合直觉。
-
Progress：新增
indeterminate加载动画状态，以及支持分段进度条 (sections)，展示更丰富的信息。 -
TreePicker：新增
onlyLeafSelectable属性，满足仅允许选择叶子节点的业务场景。 -
Button：新增 toggle 状态支持。
-
InputGroup：优化了 inside 模式下的按钮样式，视觉更加协调。
-
依赖升级：Date-fns 4.x, Prettier 3.x 等核心依赖全面升级。
立即开始
React Suite v6 现已通过 npm 发布。
npm install rsuite@latest
我们准备了详细的迁移指南，帮助您从 v5 平滑升级。
欢迎在 GitHub 上给我们 Star ，或者在 Discussion 中分享您的使用体验！
React Suite Team
1 条回复 • 2025-11-22 23:25:19 +08:00
 |
1
kemistep 12 小时 34 分钟前
已 star 支持
|
Select Language