GUIDES

从一行 CSS 开始。

不用一次搬走整间工坊。从项目需要的那一层开始：只用颜色就拿令牌，需要交互再接 React。

Install

包管理器接入

pnpm add @moesegfault/style

React / TypeScript

先安装 react 与 react-dom 19+，再在应用入口加载一次 CSS，并按需导入组件。

import "@moesegfault/style/all.css";
import { Button, Notice } from "@moesegfault/style/react";

export function App() {
  return <Notice title="你好"><Button>继续</Button></Notice>;
}

Astro

Astro 组件默认输出静态 HTML，不需要客户端 JavaScript。

---
import "@moesegfault/style/all.css";
import Button from "@moesegfault/style/astro/Button.astro";
import Card from "@moesegfault/style/astro/Card.astro";
---
<Card><h2>静态优先</h2><Button href="/start">开始</Button></Card>

Astro + React island

只对确实需要交互的组件添加客户端指令（client directive）。

---
import { Composer } from "../components/Composer";
---
<Composer client:visible />

分层 CSS

全量入口最省心；对尺寸敏感时可以明确选择层级。

@import "@moesegfault/style/tokens.css";
@import "@moesegfault/style/foundation.css";
@import "@moesegfault/style/components.css";

No build

CDN / 原生 HTML

固定版本用于生产；latest 仅适合原型、文档预览或受控的自动更新场景。

<!doctype html>
<html lang="zh-CN">
  <head>
    <link rel="stylesheet" href="https://style.moesegfault.dev/v0.1.2/css/all.css">
  </head>
  <body class="moe-surface">
    <button class="moe-button">开始创作</button>
  </body>
</html>

主题初始化

在首屏样式计算前设置 data-moe-theme，可以避免主题闪烁；这间工坊的文档页就采用该方式。

Markdown + TeX

把笔记与公式也带上

React 富文本使用独立入口，普通交互组件无需带上解析器；Astro 可以直接输出静态 HTML。用 String.raw 保留 TeX 反斜杠，避免它们被 JavaScript 字符串转义。

React

import "@moesegfault/style/all.css";
import { Markdown, Math } from "@moesegfault/style/react/rich-text";

const note = String.raw`## Notes

Euler: $e^{i\pi}+1=0$`;

<Markdown content={note} />;
<Math tex={String.raw`\sum_{k=1}^{n} k`} display />;

Astro

---
import Markdown from "@moesegfault/style/astro/Markdown.astro";
import Math from "@moesegfault/style/astro/Math.astro";
const note = "## Notes\n\nA little room to think.";
---
<Markdown content={note} />
<Math tex={String.raw`E = mc^2`} display />