React Suite (rsuite) v6 正式发布了。这一版本聚焦于现代化改造：重构底层样式系统、提供新的布局能力，并整体提升响应式体验和开发流程。v6 代表 React Suite 在稳定性的前提下，持续向更具适应性的 UI 方案演进。
v6 最重大的底层变革是将样式系统从 Less 彻底迁移到了 SCSS，并全面采用 CSS 变量 (CSS Variables) 作为主题定制的核心方案。开发者只需覆盖变量值，就能在运行时动态切换品牌色、间距或圆角，无需重新编译或配置额外的构建流程。
完整的变量清单与使用方式，可参考 CSS Variables 文档，也可以借助 Palette 工具 可视化调整品牌配色。
margin-inline-start 代替 margin-left），原生支持 RTL （从右到左）排版。px 转换为 rem，更好地支持响应式排版和无障碍缩放。React Suite v6 不仅关注组件本身，更致力于提升 AI 时代的开发效率。我们引入了对 AI 编程助手的原生支持，让 Cursor 、Windsurf 等工具能更懂 RSuite 。
我们遵循 llms.txt 标准，为文档站添加了 /llms.txt 文件。这是一个专为大语言模型 (LLM) 优化的文档索引。
当你在 Cursor 或其他 AI 工具中引用 RSuite 文档时，AI 可以通过这个文件快速获取组件的 API 定义、最佳实践和代码示例，从而生成更准确、符合 v6 规范的代码。
我们推出了官方的 Model Context Protocol (MCP) Server 。
通过 MCP ，你的 AI 助手可以直接连接到 RSuite 的知识库。这意味着：
为了让布局更加灵活高效，v6 引入了基础的布局原子组件，让开发者能够像搭积木一样构建复杂的 UI 。
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>
);
}
垂直水平居中一直是 CSS 中的高频需求，现在你可以使用 Center 组件轻松实现：
import { Center } from 'rsuite';
<Center height={200} className="bg-blue-50">
<div>Perfectly Centered Content</div>
</Center>;
在移动互联网时代，跨端适配至关重要。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 组件现在都拥有了更好的移动端适配体验，在小屏幕设备上会自动切换为更友好的交互模式。
除了布局组件，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>
useDialog：通过函数调用方式管理对话框，告别繁琐的 visible state 管理。
const dialog = useDialog();
const handleClick = async () => {
const result = await dialog.confirm({
title: '确认操作',
children: '您确定要执行此操作吗？'
});
if (result) {
console.log('Confirmed');
}
};
useFormControl：轻松创建自定义的表单控件，自动处理验证状态和错误信息。
我们深知开发者的快乐不仅仅来自于好用的组件，更来自于流畅的开发流程。
useToaster 增加了环境检查，当在 CustomProvider 上下文之外使用时会发出友好警告，帮助快速定位问题。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
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。