React Suite v6：面向现代化的稳健升级

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 类。

jsx 复制代码

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 组件轻松实现：

jsx 复制代码

import { Center } from 'rsuite';

<Center height={200} className="bg-blue-50">
  <div>Perfectly Centered Content</div>
</Center>;

4. 响应式设计的全面增强

在移动互联网时代，跨端适配至关重要。v6 对核心组件进行了响应式能力的增强。

Grid 系统升级 ：重构了 Row 和 Col，提供更灵活的断点控制对象语法。

jsx 复制代码

<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，布局更清晰。

jsx 复制代码

<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：提供统一样式的链接组件，支持自定义颜色和无障碍访问。
Menu & MegaMenu：全新的菜单系统，支持更复杂的导航结构，轻松构建大型应用导航。

Form.Stack：让表单布局排列更加整洁有序，替代了 Form 组件上的布局属性。

jsx 复制代码

<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 管理。

jsx 复制代码

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 等属性，支持更丰富的展示形态。

jsx 复制代码

<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 发布。

bash 复制代码

npm install rsuite@latest

我们准备了详细的迁移指南，帮助您从 v5 平滑升级。

欢迎在 GitHub 上给我们 Star，或者在 Discussion 中分享您的使用体验！

React Suite Team