文档

快速开始

四步在 React 19 项目中渲染第一个 Selrux 组件。

环境要求

• React 与 ReactDOM ^19.0.0（peerDependencies）。
• 支持 ESM 与 CSS 导入的构建工具，例如 Vite。

安装

引入样式

默认无需手动引入：每个组件入口会自动引入自身样式（如 @selrux/ui/button 引入 dist/css/button.css），组合组件会连同被组合组件的样式一起引入，ConfigProvider 引入 tokens.css。打包器只会收进实际用到的组件样式。

也可以手动选择样式，三种方式任选其一，不要混用（混用只会重复，不影响效果）：

123456789// 1. 自动按需（默认）：只导入组件即可
import { Button } from '@selrux/ui/button';

// 2. 手动按组件引入
import '@selrux/ui/css/tokens.css';
import '@selrux/ui/css/button.css';

// 3. 全量（兼容旧用法）
import '@selrux/ui/styles.css';

SSR：无需额外配置。每个入口另有不含 CSS 导入的 Node 构建（node 条件），Vite SSR 外部化依赖、Next.js 服务端与直接在 Node 中 import 都会解析到它；浏览器构建（import 条件）照常自动带上组件样式，两边渲染的标记相同。同一运行时只会解析到其中一份，ConfigProvider 的 React Context 不会重复；不要绕过出口直接引用 dist/ 下的文件。

不经打包器直接在 Node 中运行时，请改用手动方式（2 或 3）并由你的服务端框架加载 CSS。

第一个按钮

12345678910import { ConfigProvider } from '@selrux/ui/config-provider';
import { Button } from '@selrux/ui/button';

export function App() {
  return (
    <ConfigProvider>
      <Button onClick={() => console.log('clicked')}>开始</Button>
    </ConfigProvider>
  );
}

Token 作用在 ConfigProvider 渲染的根节点（.srx-ui）上，请把组件放在 ConfigProvider 之内。

配置主题

1234567<ConfigProvider
  mode="dark"
  size="sm"
  colors={{ primary: '#bf80ff', primaryForeground: '#261238' }}
>
  {children}
</ConfigProvider>

可以在主题编辑器里可视化生成这段配置。