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 阶段不访问 documentcreatePortal 仅在 typeof document !== "undefined" 时执行)。
  • Drawer / Popover:键盘与外部点击监听放在 effect 内,并判断 typeof window

营销页体积

营销页只导入 blocks / 所需 primitives,避免顺带打入 Table 等后台重型模块。详见 快速开始 与分层入口。

Form / Table 用法纪律

Form & Table 性能纪律