# @canek-ui/material-design-system 中文文档

规范地址：https://npmcn.com/package/%40canek-ui/material-design-system/

版本：0\.12\.0
npm 元数据更新时间：2026-10-31T07:10:30.173Z
中文译文更新时间：2026-11-09T17:27:31.853Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40canek-ui/material-design-system
原文对照：https://npmcn.com/package/%40canek-ui/material-design-system/?lang=original
项目主页：https://canek.mx/
源码仓库：https://github.com/CanekDevs/canek-ui-design-system

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

- 包体积（解压后）：1.1 MB，82 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：0 个
- peer 依赖：react ^18\.3\.0，react-dom ^18\.3\.0，@mui/material ^7\.0\.0，@emotion/react ^11\.13\.0，@emotion/styled ^11\.13\.0，@mui/icons-material ^7\.0\.0
- 首次发布：2026-10-29T02:21:05.541Z
- 最新版本发布：2026-10-31T07:10:29.976Z
- 近 30 天下载量：2119（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

设计系统德·卡内克. Reactes sobre MUI 7 con sords de diseño y theming unficado. (原始内容存档于2018-07-29) (英语).

## 安装

```sh
npm install @canek-ui/material-design-system
```

也可以使用：`pnpm add @canek-ui/material-design-system`、`yarn add @canek-ui/material-design-system`、`bun add @canek-ui/material-design-system`

## README

# @canek-ui/ 材料设计系统

设计系统 [卡内克](https://canek.mx/)。 组件 重构 MUI 7, 重构 CSS 变量, 重构和 API 一致 .

[![npm version](https://img.shields.io/npm/v/@canek-ui/material-design-system.svg)](https://www.npmjs.com/package/@canek-ui/material-design-system) [![CI](https://github.com/CanekDevs/canek-ui-design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/CanekDevs/canek-ui-design-system/actions/workflows/ci.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://npmcn.com/package/%40canek-ui/material-design-system/LICENSE)

* * *

## 塔布拉-德康特尼多

-   [起义组织](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-instalaci%C3%B3n)
-   [乌苏](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-uso)
-   [构成部分](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-componentes)
-   [泰马](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-temas)
-   [托肯斯·德德内尼奥](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-tokens-de-dise%C3%B1o)
-   [普罗耶克托岛](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-estructura-del-proyecto)
-   [发展](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-desarrollo)
-   [召集会议](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-convenciones)
-   [弗卢霍·德·特巴霍](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-flujo-de-trabajo)
-   [公众](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-publicaci%C3%B3n)
-   [联系人](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-contribuir)
-   [诉讼](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-licencia)

* * *

## 起义组织

```bash
npm install @canek-ui/material-design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
```

反应 18, MUI 7, `@mui/icons-material` 尔 `@emotion/*` 儿子们 **同行依赖关系**没有包含Huyen en el bund del paquete, el consumidor debe instalarlas explícitamente.

我们是:

```bash
pnpm add @canek-ui/material-design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
```

我们的线:

```bash
yarn add @canek-ui/material-design-system @mui/material @mui/icons-material @emotion/react @emotion/styled
```

* * *

## 乌苏

### 构成部分suelto

```tsx
import { CnButton } from "@canek-ui/material-design-system";
import "@canek-ui/material-design-system/styles.css";

export function SaveButton() {
  return (
    <CnButton variant="contained" color="primary">
      Guardar cambios
    </CnButton>
  );
}
```

### 铁道部

```tsx
import { CanekThemeProvider, CnButton } from "@canek-ui/material-design-system";
import "@canek-ui/material-design-system/styles.css";

export function App() {
  return (
    <CanekThemeProvider mode="light">
      <CnButton variant="contained" color="primary">
        Guardar cambios
      </CnButton>
    </CanekThemeProvider>
  );
}
```

进口 del CSS es **义务**. Los sorders de de deseño se exponen como CSS 变量预配置 `--cn-*` y 组分消耗。 Sin es 导入,Los 组分usan倒置 pero el theming no funciona.

* * *

## 构成部分

| 构成部分e | 爱斯塔多 | 节奏 | 德克赖普西翁 |
| --- | --- | --- | --- |
| `CnButton` | 稳定 | 页:1 | Botón con 变体,色相,tamaños,形状,加载y soporte de links. 中国植物物种信息数据库. |
| `CnIcon` | 稳定 | 页:1 | Ícono con register,tamaños, 彩色semánticos,自旋,脉冲y旋转. |

普罗克西摩斯: `CnChip`, (中文(简体) ), `CnAlert`, (中文(简体) ), `CnAvatar`, (中文(简体) ), `CnInput`, (中文(简体) ), `CnForm`, (中文(简体) ), `CnDataTable`。 。 。 .

### `CnButton`

```tsx
<CnButton
  variant="contained"        // "contained" | "outlined" | "text"
  color="primary"            // primary | secondary | success | warning | info | error | accent | neutral
  size="medium"              // "small" | "medium" | "large"
  shape="rounded"            // "rounded" | "pill" | "square"
  startIcon="add"            // string (usa CnIcon) o ReactNode
  endIcon="arrow_forward"
  loading={false}
  fullWidth={false}
  href="https://canek.mx"    // renderiza <a> en lugar de <button>
  target="_blank"
  onClick={() => {}}
>
  Guardar cambios
</CnButton>
```

### `CnIcon`

```tsx
<CnIcon
  name="check"               // string del registry
  size="md"                  // "xs" | "sm" | "md" | "lg" | "xl" | "2xl" o número
  color="success"            // primary | secondary | success | warning | error | info | accent | muted | subtle | inherit
  spin={false}
  pulse={false}
  rotate={0}
  label="Éxito"              // opcional, agrega role="img" y aria-label
/>
```

(原始内容存档于2018-10-21) (英语). El register incluye ~80 íconos comunes. 普德扩展器 `registerIcons`数字 :

```tsx
import { registerIcons } from "@canek-ui/material-design-system";
import CustomIcon from "@mui/icons-material/CustomIcon";

registerIcons({
  custom_thing: CustomIcon,
});
```

* * *

## 泰马

`CanekThemeProvider` 接受情况a `mode`数字 :

-   `"light"` - tema claro( 默认)
-   `"dark"` -特玛·斯库罗

```tsx
<CanekThemeProvider mode="dark">
  <App />
</CanekThemeProvider>
```

埃尔 `mode` 脚本 `data-cn-theme="dark"` 内 `<html>`, lo cual activa las varies oscuras de los sorders CSS. (原始内容存档于2018-09-29).

* * *

## 托肯斯·德德内尼奥

以多斯格式补充的符号 :

-   **CSS 变量** 内 `src/styles/tokens.css` ——相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
-   **Objetos 类型脚本** 内 `src/tokens/` - 《宪法》第1款.

### (原始内容存档于2018-10-21). Sobreescribir sor por proyecto

```css
/* src/styles/app-tokens.css, importado después de @canek-ui/material-design-system/styles.css */
:root {
  --cn-color-brand-600: #3d5afe;
  --cn-radius-md: 6px;
  --cn-font-sans: "Inter", system-ui, sans-serif;
}
```

### 托肯斯不负责任

| 格鲁波 | 预选赛 | 埃让普罗 |
| --- | --- | --- |
| 颜色 | `--cn-color-*` | `--cn-color-brand-600` |
| RGB( 尔巴语) | `--cn-color-rgb-*` | `--cn-color-rgb-brand-600` |
| 间距 | `--cn-space-*` | `--cn-space-4` (16px) (英语) |
| 半径 | `--cn-radius-*` | `--cn-radius-md` (8页x) |
| 阴影 | `--cn-shadow-*` | `--cn-shadow-md` |
| 蒂波格拉菲亚 | `--cn-font-*` | `--cn-font-sans`, (中文(简体) ), `--cn-font-size-md` |
| 动议 | `--cn-duration-*`, (中文(简体) ), `--cn-ease-*` | `--cn-duration-base` (200ms) (英语) |
| Z指数 | `--cn-z-*` | `--cn-z-modal` |

* * *

## 普罗耶克托岛

```
canek-ui-design-system/
├── .github/
│   └── workflows/
│       └── ci.yml                 # CI: lint + typecheck + test + build
├── .storybook/
│   ├── main.ts                    # configuración del Storybook
│   └── preview.tsx                # decorators globales (theme, tokens)
├── scripts/
│   └── copy-css.mjs               # copia tokens.css a dist/ después del build
├── src/
│   ├── components/
│   │   ├── CnButton/
│   │   │   ├── CnButton.tsx
│   │   │   ├── CnButton.stories.tsx
│   │   │   ├── CnButton.test.tsx
│   │   │   └── index.ts
│   │   └── CnIcon/
│   │       ├── CnIcon.tsx
│   │       ├── icons.ts           # registry nombre → componente
│   │       ├── CnIcon.stories.tsx
│   │       ├── CnIcon.test.tsx
│   │       └── index.ts
│   ├── styles/
│   │   └── tokens.css             # CSS variables (light + dark)
│   ├── theme/
│   │   ├── CanekThemeProvider.tsx
│   │   └── index.ts
│   ├── tokens/
│   │   └── index.ts               # tokens como objetos TS
│   └── index.ts                   # barrel público del paquete
├── .editorconfig
├── .gitignore
├── .npmignore
├── .nvmrc                         # Node 22
├── .prettierrc
├── LICENSE
├── README.md
├── eslint.config.js
├── package.json
├── tsconfig.json
├── vite.config.ts
├── vitest.config.ts
└── vitest.setup.ts
```

* * *

## 发展

### 请求

-   **节点.js** `>=20.0.0` (第22和26个节点。).
-   **无** `>=10.0.0`。 。 。 .
-   **图形** (中文(简体) ).
-   **虚拟系统** 复授记. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}这简直是一团糟 `.editorconfig` y 配置 prettier/ESLint que se aplican automáticamente. 中国植物物种信息数据库.

虚拟版本 :

```bash
node --version
npm --version
git --version
```

### 正式设置

```bash
git clone git@github.com:CanekDevs/canek-ui-design-system.git
cd canek-ui-design-system
npm install
```

视窗, si `npm install` 警告书 `install-scripts` (npm 11+),aprueba los 脚本为 esbuilt:

```bash
npm install-scripts approve esbuild
npm rebuild esbuild
```

### 脚本不负责任

| 科曼多语Name | Qué hace (英语) |
| --- | --- |
| `npm run storybook` | 列万塔故事书 en `http://localhost:6006` (大观相. |
| `npm run dev` | 别名 `storybook`。 。 。 . |
| `npm run build` | 吉纳拉 `dist/` (JS, CJS, tipos, sirs.css.). |
| `npm run build-storybook` | Genera el Storybook estático en (原始内容存档于2018-09-21) `storybook-static/`。 。 。 . |
| `npm run test` | Ejecuta la house con Vitest (una vez). (原始内容存档于2019-09-29). |
| `npm run test:watch` | Ejecuta Vitest en modo watch (再推荐出 al iteerar). |
| `npm run lint` | (原始内容存档于2018-03-26). Ejecuta ESLint sobre to do el proyecto. |
| `npm run format` | 福玛蒂娅·皮蒂埃. |
| `npm run format:check` | 维基文库中相关的原始文献: 活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活活塞活塞活活活活活活塞活塞活活活活. |
| `npm run typecheck` | 埃耶库塔 `tsc --noEmit`。 。 。 . |

### 故事书

故事书 as la fuente de verdad 视觉设计系统. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}卡达 vive con sus stories al lado:

```bash
npm run storybook
```

布尔 `http://localhost:6006`. Cada 构件 平起平起平起地 `Default` más stories de various, tamaños, colores y estados. 中国植物物种信息数据库.

### 承诺蚁群

```bash
npm run typecheck && npm run lint && npm run test && npm run build
```

(原始内容存档于2013-10-12). Los Cuatro deben pasar. 西阿尔古诺·法尔塔 没有承诺.

* * *

## 召集会议

### 提交

格式化 :

```
<tipo>(<scope>): <descripción corta> - por: <Nombre Apellido>
```

(原始内容存档于2018-09-26). Tipos válidos: `feat`, (中文(简体) ), `fix`, (中文(简体) ), `refactor`, (中文(简体) ), `style`, (中文(简体) ), `docs`, (中文(简体) ), `chore`, (中文(简体) ), `test`, (中文(简体) ), `ci`, (中文(简体) ), `perf`。 。 。 .

范围 válidos: kebab-case 中包含的`button`, (中文(简体) ), `icon`, (中文(简体) ), `chip`, (中文(简体) ), `theme`, (中文(简体) ), `tokens`(一) 执行 `repo` (原始内容存档于2018-10-21). para cambios globales.

埃让普洛斯:

```
feat(icon): add CnIcon with registry and semantic tokens - por: Angel Rodriguez
fix(button): respect loadingPosition for center spinner - por: Angel Rodriguez
docs: expand README with developer setup - por: Angel Rodriguez
chore(deps): bump mui to 7.3.11 - por: Angel Rodriguez
```

### 分支

| 拉玛 | 普罗波西托语Name |
| --- | --- |
| `main` | 普罗道克翁. (原始内容存档于2019-09-21) (英语). Solo controducationa desde PRs aprobados. |
| `feature/<nombre>` | 新funcionalidad. 中国植物物种信息数据库. |
| `fix/<nombre>` | (原始内容存档于2018-10-12). Correccion de bug. |
| `chore/<nombre>` | 曼特尼米恩托, 依赖, 配置. |
| `docs/<nombre>` | 索罗文件. |

埃让普洛: `feature/cn-chip`, (中文(简体) ), `fix/icon-spin-direction`, (中文(简体) ), `chore/upgrade-storybook`。 。 。 .

### 埃斯蒂洛·克迪戈

-   **血清凝血剂** código(VMs例外,无aplica a este repo)。 (原始内容存档于2013-10-12). Si un bloade necessita commentario, refactízalo.
-   **`type` 卢森堡 `interface`** en TypeScript.
-   **Funciones flecha (法语)** 卢森堡 `function` (例外情况) `forwardRef` (原始内容存档于2017-10-12). que lo requiere.
-   **`const`** 伤心 `let`。 。 。 .
-   **破坏结构** 减道具.
-   **别名 `@/`** 进口量 `src/`。 。 。 .
-   **红外线** código, 承诺odocs.

### 构成部分

Cada 组件 nuevo sigue esta estructura:

```
src/components/CnNombre/
├── CnNombre.tsx
├── CnNombre.stories.tsx
├── CnNombre.test.tsx
└── index.ts
```

Yse 输出a desde `src/index.ts`数字 :

```typescript
export { CnNombre } from "./components/CnNombre";
export type { CnNombreProps } from "./components/CnNombre";
```

* * *

## 弗卢霍·德·特巴霍

### 1\. 干地 `main`

```bash
git checkout main
git pull
git checkout -b feature/cn-chip
```

### 2\. 发展

```bash
# Iterar en Storybook
npm run storybook

# Correr tests mientras trabajas
npm run test:watch
```

### 3\. 特大待办事宜

```bash
npm run typecheck && npm run lint && npm run test && npm run build
```

### 4\. 委员会

```bash
git add src/components/CnChip
git add src/index.ts
git commit -m "feat(chip): add CnChip with color variants - por: Angel Rodriguez"
```

农卡 `git add .` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我可没胆量 (原始内容存档于2013-10-12). Siempre archivos especificos por ruta.

### 5\. 推进和PR

```bash
git push -u origin feature/cn-chip
```

(原始内容存档于2018-09-26) (英语). Abre un Pull request en GitHub hacia `main`数字 :

-   **蒂图洛:** 小额承付本金(`feat(chip): add CnChip`) (中文(简体) ).
-   **德克丽普西翁:** qué hace el 组件,qué 变体 añade,截图 del Story Book.
-   **审查者:** (原始内容存档于2018-09-29) (英语). almenos uno del confuto.

### 6\. 合并

(原始内容存档于2019-09-25). Una vez apobado y CI en verde:

-   **平面并合并** (建议) o **合并执行**. 农卡 **重组和合并** 波克重写了SHA.
-   Borra la rama después del 合并.

### 7\. 当地实际

```bash
git checkout main
git pull
git branch -d feature/cn-chip
```

* * *

## 公众

### 核对列表 antes de publicar

-   [ ] CI en verde en (法语) `main`。 。 。 .
-   [ ] 托多斯输了对巴桑的测试`npm run test`) (中文(简体) ).
-   [ ] 埃尔建立基因拉 `dist/` 罪恶警告.
-   [ ] El ChangeGELOG o el professen los cambios. (原始内容存档于2018-09-29). El ChangeGELOG o el profession.
-   [ ] (原始内容存档于2013-10-12). versión se decidió rightamente (ver abajo).

### 语义版本

| 坎比奥 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}一个弯曲的花花 |
| --- | --- |
| 中断更改( API 不兼容) | `major` (0.x-1.0) (中文(简体) ) |
| 新组件 o nueva 道具不中断 | `minor` (0.2-0.3) (中文(简体) ) |
| 虫子修补 内衣 | `patch` (0.2.0-0.2.1) (中文(简体) ) |

万国海 `0.x.y`, (中文(简体) ), **cada nuevo 组件为非次要**。 。 。 . `CnButton` → `v0.1.0`。 。 。 . `CnIcon` → `v0.2.0`。 。 。 . `CnChip` → `v0.3.0`Cuando cierres la API de los parties más usados y estés listo para producción, salas a) 维基语录链接:名人名言 - 分类 `v1.0.0`。 。 。 .

### 宣传

```bash
# 1. Actualizar versión (esto crea commit + tag automáticamente)
npm version minor
# o
npm version patch
# o
npm version major

# 2. Push con tags
git push --follow-tags

# 3. Publicar a npm
npm publish --access public
```

`npm publish` 要求2FA 行动在tucenta。 (原始内容存档于2018-10-21) (英语). Te pedirá Optport de 6 dígitos.

### 公共权利

-   `https://www.npmjs.com/package/@canek-ui/material-design-system`
-   `npm view @canek-ui/material-design-system`

### 恶性销售

**没有自己 puede replazar una versión ya publicada.** 是公关 `0.2.0` 骗取错误 :

```bash
# Deprecar la versión (los consumidores nuevos no la verán)
npm deprecate @canek-ui/material-design-system@0.2.0 "Bug en CnIcon. Usar 0.2.1"

# Publicar la versión corregida
npm version patch
git push --follow-tags
npm publish --access public
```

* * *

## 联系人

1.  分叉(si eres externo) o 分支直取 (si eres del confuto).
2.  (原始内容存档于2013-10-12). Sigue el flujo de trabajo de arriba.
3.  (c) 与《公约》第2条有关的其他事项, `type` 没有 `interface`, funciones flecha等).
4.  无效公关:
    -   (原始内容存档于2018-10-21). Descripción Clara del Cambio.
    -   (原始内容存档于2018-10-21). Screenshots del Storybook si es un communite nuevo.
    -   (原始内容存档于2017-10-29). Link al issue relacionado si aplica.
5.  回答一个LOS评论.

### 红外线 :

核查清单:

-   [ ] `src/components/CnNuevo/CnNuevo.tsx` 执行会议.
-   [ ] `src/components/CnNuevo/CnNuevo.stories.tsx` (原始内容存档于2018-10-21). con stories de todas las splantes.
-   [ ] `src/components/CnNuevo/CnNuevo.test.tsx` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}con test de los comportamientos clave. {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   [ ] `src/components/CnNuevo/index.ts` 输了出口.
-   [ ] 导出 en `src/index.ts`。 。 。 .
-   [ ] 欢呼吧 [构成部分](https://npmcn.com/package/%40canek-ui/material-design-system/#readme-componentes) 读取.
-   [ ] 显式 que `npm run typecheck && npm run lint && npm run test && npm run build` p.
-   [ ] 故事书上的Probar que todas las stories companizan sin errores en Consola. (原始内容存档于2018-09-29). Probar en Storybook que todas las stories companizan sin fairs en Consola.

* * *

## 诉讼

麻省理工学院 [卡内克](https://canek.mx/)垂直 [自由主义](https://npmcn.com/package/%40canek-ui/material-design-system/LICENSE)。 。 。 .

## 常见问题

### @canek-ui/material-design-system 是什么？

设计系统德·卡内克\. Reactes sobre MUI 7 con sords de diseño y theming unficado\. \(原始内容存档于2018-07-29\) \(英语\)\.

### 如何安装 @canek-ui/material-design-system？

在项目目录运行 npm install @canek-ui/material-design-system，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.3\.0）、react-dom（^18\.3\.0）、@mui/material（^7\.0\.0）、@emotion/react（^11\.13\.0）、@emotion/styled（^11\.13\.0）、@mui/icons-material（^7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @canek-ui/material-design-system 支持 TypeScript 吗？

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

### @canek-ui/material-design-system 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @canek-ui/material-design-system 需要什么版本的 Node\.js？

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

### @canek-ui/material-design-system 可以商用吗？

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

### @canek-ui/material-design-system 的下载量有多少？

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

### @canek-ui/material-design-system 还在维护吗？

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