# @ecologi-action-ltd/mycelia 中文文档

规范地址：https://npmcn.com/package/%40ecologi-action-ltd/mycelia/

版本：0\.52\.0
npm 元数据更新时间：2026-11-05T10:26:22.341Z
中文译文更新时间：2026-11-13T05:53:40.563Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ecologi-action-ltd/mycelia
原文对照：https://npmcn.com/package/%40ecologi-action-ltd/mycelia/?lang=original
项目主页：https://github.com/ecologi/mycelia#readme
源码仓库：https://github.com/ecologi/mycelia

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.5 MB，159 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：4 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-02-02T16:06:12.526Z
- 最新版本发布：2026-11-05T10:26:22.168Z
- 近 30 天下载量：12175（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：75（近 12 个月 75 个）

## 中文简介

Mycelia 设计系统 - 具有香草- 提取样式的可访问反应组件

## 安装

```sh
npm install @ecologi-action-ltd/mycelia
```

也可以使用：`pnpm add @ecologi-action-ltd/mycelia`、`yarn add @ecologi-action-ltd/mycelia`、`bun add @ecologi-action-ltd/mycelia`

## README

# Mycelia 设计系统

React 组件库 [反射 Aria 组件](https://react-spectrum.adobe.com/react-aria/) 财务报告和审定财务报表 [香草摘录](https://vanilla-extract.style/)。 。 。 .

## 特征

-   **默认可访问** - 建造在反应Aria组件上,以全面遵守《世界妇女宪章》
-   **类型安全标志** - 作为TypeScript值或vanilla-extract主题合同提供的设计令牌
-   **图像对齐** - 手提箱和部件与 [Mycelia Figma 设计系统](https://www.figma.com/design/RYoTdNBnqPszV9I8dOEZFb/Mycelia-Design-System)

## 安装

```bash
npm install @ecologi-action-ltd/mycelia
```

## 类型

Mycelia 使用过 [汉肯·格罗特斯克](https://fonts.google.com/specimen/Hanken+Grotesk) 作为它的主要类型面。 将此添加到您的 HTML `<head>`数字 :

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
```

或导入您的 CSS :

```css
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
```

## 设置

### 1\. 导入样式

在您的应用程序的入口点导入 CSS 文件 :

```tsx
import '@ecologi-action-ltd/mycelia/styles.css';
```

### 2\. 应用主题

将主题类添加到根元素中。 从这里导入 `@ecologi-action-ltd/mycelia/theme`数字 :

```tsx
import { myceliaTheme } from '@ecologi-action-ltd/mycelia/theme';

// In your root layout/component
<body className={myceliaTheme}>
  {children}
</body>
```

### Next.js App路由器

下一个.js App路由器,您的 `layout.tsx` 应该看起来像:

```tsx
import '@ecologi-action-ltd/mycelia/styles.css';
import { myceliaTheme } from '@ecologi-action-ltd/mycelia/theme';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className={myceliaTheme}>
        {children}
      </body>
    </html>
  );
}
```

## 客户端路由

链接组件要与客户端导航工作, 请将您的应用程序包入 `RouterProvider`。从一个单独的切入点导出,以避免需要 `"use client"` 在服务器组件中.

详细情况见 [反应 Aria 路径文件](https://react-spectrum.adobe.com/react-aria/routing.html)。 。 。 .

### Next.js App 路由器示例

创建客户端提供者组件 :

```tsx
// app/providers.tsx
"use client";

import { RouterProvider } from '@ecologi-action-ltd/mycelia/router';
import { useRouter } from 'next/navigation';

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  return <RouterProvider navigate={router.push}>{children}</RouterProvider>;
}
```

然后在您的布局中使用 :

```tsx
// app/layout.tsx
import '@ecologi-action-ltd/mycelia/styles.css';
import { myceliaTheme } from '@ecologi-action-ltd/mycelia/theme';
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={myceliaTheme}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

### 3\. 使用组件

```tsx
import { Button, Text } from '@ecologi-action-ltd/mycelia';

<Text variant="h1">Welcome to Mycelia</Text>
<Button variant="primary">Get Started</Button>
```

## 使用托肯斯语Name

托肯斯可以在自己的风格中直接被使用而不用香草-取出:

```tsx
import { tokens } from '@ecologi-action-ltd/mycelia/tokens';

const styles = {
  backgroundColor: tokens.color.surface.primary.default,
  borderRadius: tokens.radius.md,
  padding: tokens.spacing['16'],
};
```

对于香草-extract用户,使用类型安全CSS可变访问的主题合同:

```tsx
import { vars } from '@ecologi-action-ltd/mycelia/theme';
import { style } from '@vanilla-extract/css';

export const card = style({
  backgroundColor: vars.color.surface.primary.default,
  borderRadius: vars.radius.md,
});
```

## 文档

运行故事本以探索所有组件和符号 :

```bash
npm run storybook
```

## 发展

见 [捐款额](https://npmcn.com/package/%40ecologi-action-ltd/mycelia/CONTRIBUTING.md) 用于建立和增加新的组成部分.

## 释放

这个项目使用 [更改](https://github.com/changesets/changesets) 用于版本管理和发布.

### 添加更改列表

当进行应当放行的更改时,创建一个更改站:

```bash
npm run changeset
```

这将促使你:

1.  选择更改类型( patch, 次要, 主要)
2.  撰写更改摘要

将在 `.changeset/` - 用你的公关做这个.

### 何时添加更改列表

-   **补丁**: 错误修正,文档更新
-   **小声**: 新特性,不突破性改变
-   **主要**: 打破更改

跳过更改器进行内部更改,如CI更新或重构,不影响公共API.

### 如何释放工作

1.  有更改的 PR 合并到 `main`
2.  自动创建/更新“Version套件” PR
3.  当版本 PR 合并时, 软件包会发布到 npm

### 测试 PR 更改

PR预览包自动被发布. 通过 PR 注释中的链接安装 :

```bash
npm i https://pkg.pr.new/@ecologi-action-ltd/mycelia@<commit-hash>
```

## 许可证

麻省理工学院

## 常见问题

### @ecologi-action-ltd/mycelia 是什么？

Mycelia 设计系统 - 具有香草- 提取样式的可访问反应组件

### 如何安装 @ecologi-action-ltd/mycelia？

在项目目录运行 npm install @ecologi-action-ltd/mycelia，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ecologi-action-ltd/mycelia 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ecologi-action-ltd/mycelia 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ecologi-action-ltd/mycelia 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @ecologi-action-ltd/mycelia 可以商用吗？

@ecologi-action-ltd/mycelia 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ecologi-action-ltd/mycelia 的下载量有多少？

根据 npm 官方下载统计，@ecologi-action-ltd/mycelia 在 2026/10/13 – 2026/11/11 这 30 天内被下载 12,175 次，日均约 406 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ecologi-action-ltd/mycelia 还在维护吗？

最新版本 0\.52\.0 发布于 2026/11/05（8 天前）；至今共发布 75 个版本，其中过去 12 个月发布了 75 个；首次发布于 2026/02/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。