# @batoanng/mui-components 中文文档
规范地址：https://npmcn.com/package/%40batoanng/mui-components/
版本：3\.7\.0
npm 元数据更新时间：2026-06-06T10:58:08.949Z
中文译文更新时间：2026-11-07T18:15:01.233Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40batoanng/mui-components
原文对照：https://npmcn.com/package/%40batoanng/mui-components/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：198 kB，180 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.0\.0
- 运行依赖：5 个
- peer 依赖：@emotion/react ^11\.14\.0，@emotion/styled ^11\.14\.1，@mui/icons-material 9\.0\.0，@mui/material 9\.0\.0，@mui/utils ^9\.0\.0，@mui/x-date-pickers 9\.0\.4，framer-motion ^12\.38\.0，react ^19\.2\.5，react-dom ^19\.2\.5，react-dropzone ^15\.0\.0，react-hook-form 7\.74\.0，react-idle-timer ^5\.7\.3，@testing-library/react ^16\.3\.2
- 首次发布：2025-07-02T10:36:32.317Z
- 最新版本发布：2026-06-06T10:58:08.821Z
- 近 30 天下载量：17206（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 24 个）
## 中文简介
[](https://www.npmjs.com/package/@batoanng/mui-components) \[(https://packagephobiag.com/result?p-=@batoanng/mui-) (中文(简体) )
## 安装
```sh
npm install @batoanng/mui-components
```
也可以使用：`pnpm add @batoanng/mui-components`、`yarn add @batoanng/mui-components`、`bun add @batoanng/mui-components`
## README
# @batoanng/mui-组件
[](https://www.npmjs.com/package/@batoanng/mui-components) [](https://packagephobia.com/result?p=@batoanng/mui-components) [](https://mui-components-batoanng.vercel.app/)
一个完全打入、可主题和可访问的组件库 **反应**, (中文(简体) ), **类型脚本**,以及 **材料UI(MUI)**它遵循原子设计原则和拥有完整主题系统、钩子、测试设施的船只,并形成支持,以加速多个项目的UI发展.
* * *
## \* 特性
- 建造在 [毛里求斯](https://mui.com/)
- 由原子设计(原子、分子、形式)组织
- 演示支持( Light/ Dark 模式、 象征性调色板、 打印)
- 自定义钩和公用事业
- 准备使用 `ThemeProvider` 财务报告和审定财务报表 `CssBaseline`
- 开发者工具:故事本、Vitest、ESLint、Pretier
- 在npm上发表和部署的故事书: [(原始内容存档于2018-09-21) (英语). mui-communists-batoanng.vercel.app](https://mui-components-batoanng.vercel.app/)
* * *
## \* 安装
```bash
npm install @batoanng/mui-components
```
如果您尚未安装同伴依赖关系, 也必须安装 :
```bash
npm install react react-dom @mui/material @mui/icons-material @mui/utils @emotion/react @emotion/styled framer-motion react-hook-form
```
一些出口需要可选的对等依赖:
```bash
npm install @mui/x-date-pickers react-dropzone react-idle-timer
```
* * *
## QQ 快速启动
将您的应用程序包入主题提供者 :
```tsx
import { defaultTheme } from '@batoanng/mui-components';
import { CssBaseline, ThemeProvider } from '@mui/material';
export default function App() {
return (
{/* Your app components */}
);
}
```
使用组件 :
```tsx
import { Button } from '@batoanng/mui-components';
;
```
* * *
## 构件结构
```
src/
├── components/
│ ├── atoms/ # Base building blocks (e.g., Button, Label)
│ ├── molecules/ # Compound components (e.g., IdleTimer)
│ ├── form/ # Input controls and validation-aware forms (integrated with react-hook-form)
│ └── index.ts # Entry point for all component exports
```
所有部件均通过下列方式再出口: `@batoanng/mui-components`数字 :
```tsx
import { FormTextField } from '@batoanng/mui-components';
```
测试工具是从单独的子路径输出的,所以生产捆绑不包括测试库:
```tsx
import { render, screen } from '@batoanng/mui-components/test-utils';
```
* * *
## QQ 主题系统
位于 `src/theme/`它包括:
- 光和暗主题创建函数
- 自定义间距、 弧度、 阴影、 打印
- 颜色调色板符合品牌/UI标志
用法 :
```tsx
import { defaultTheme, createDefaultTheme } from '@batoanng/mui-components';
const lightTheme = createDefaultTheme({}); // Light theme is default
const darkTheme = createDefaultTheme({ darkTheme: true });
...
...
```
* * *
## 发展
常见命令 :
```bash
pnpm dev # Start Storybook
pnpm test # Run unit tests with Vitest
pnpm lint # Run ESLint
pnpm format # Format with Prettier
pnpm build # Build library output
pnpm clean # Remove local build, Storybook, cache, and package install artifacts
```
Linting是通过本地平面配置入口配置的 [`eslint.config.mjs`](https://npmcn.com/package/%40batoanng/mui-components/eslint.config.mjs),其构成为:
- `@batoanng/eslint-config`
- `@batoanng/eslint-config/typed`
- `@batoanng/eslint-config/test`
* * *
## · 故事本
在线查看完整组件库 :
👉 [https://mui-communitys-batoanng.vercel.app/ 页面存档备份,存于互联网档案馆](https://mui-components-batoanng.vercel.app/)
本地运行 :
```bash
pnpm dev
```
* * *
## 软件包大小
检查已发布的软件包 `npm pack --dry-run`。本地文件夹大小可以大得多,因为被忽略的文件夹如 `node_modules/.cache` 财务报告和审定财务报表 `storybook-static` 在开发期间创建.
## 常见问题
### @batoanng/mui-components 是什么？
\[\(https://packagephobiag\.com/result?p-=@batoanng/mui-\) \(中文\(简体\) \)
### 如何安装 @batoanng/mui-components？
在项目目录运行 npm install @batoanng/mui-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@emotion/react（^11\.14\.0）、@emotion/styled（^11\.14\.1）、@mui/icons-material（9\.0\.0）、@mui/material（9\.0\.0）、@mui/utils（^9\.0\.0）、framer-motion（^12\.38\.0）、react（^19\.2\.5）、react-dom（^19\.2\.5）、react-hook-form（7\.74\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @batoanng/mui-components 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @batoanng/mui-components 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @batoanng/mui-components 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=24\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @batoanng/mui-components 可以商用吗？
@batoanng/mui-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @batoanng/mui-components 的下载量有多少？
根据 npm 官方下载统计，@batoanng/mui-components 在 2026/10/08 – 2026/11/06 这 30 天内被下载 17,206 次，日均约 574 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @batoanng/mui-components 还在维护吗？
最新版本 3\.7\.0 发布于 2026/06/06（5 个月前）；至今共发布 42 个版本，其中过去 12 个月发布了 24 个；首次发布于 2025/07/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。