SSR / 静态样式
本库不使用运行时 CSS-in-JS。服务端与静态导出均可先输出 HTML,再由客户端激活交互。
样式引入
import '@kotodama/lego-react/style.css';
// 或按层(营销页推荐):
import '@kotodama/lego-react/primitives.css';
import '@kotodama/lego-react/blocks.css';
// 后台再加:
// import '@kotodama/lego-react/patterns.css';
主题通过宿主节点属性预设,可在 SSR 阶段写入:
<html>
<body>
<div data-theme="admin" data-density="comfortable">
<!-- app root -->
</div>
</body>
</html>
ConfigProvider 会在客户端同步 data-theme / data-density 与可选 Token 覆盖。
DOM 边界
- 模块顶层不得访问
document / window。
- Toast:客户端挂载
ToastProvider;命令式 message.* 另需 ToastBridge。SSR 阶段不访问 document(createPortal 仅在 typeof document !== "undefined" 时执行)。
- Drawer / Popover:键盘与外部点击监听放在 effect 内,并判断
typeof window。
营销页体积
营销页只导入 blocks / 所需 primitives,避免顺带打入 Table 等后台重型模块。详见 快速开始 与分层入口。
Form / Table 用法纪律
见 Form & Table 性能纪律。