# 相关的项目

<p class="description">以下精心挑选了一系列的库，他们都值得一阅。</p>

因为 Material-UI 能够解决的问题范围有限，我们尽量会与其他库好好合作。 请随时提交一个 pull request 来加入另外一个项目，如果它合适的话我们会将其纳如列表。

## 设计资源

<a href="https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
<a href="https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" /></a>

一套可重复使用的设计工具组件已经面世，这些工具是为了配合 React 组件而设计的，它们可以帮助你制作优秀的产品。

- [Figma](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-figma)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 组件。
- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 符号。
- [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd)：大型 UI 套件，包含 600 多个手工制作的 Material-UI 符号。 
- [Framer](https://packages.framer.com/package/material-ui/material-ui)：Material-UI 组件的小型 UI 套件

## 图像和图案

- [ Unsplash ](https://unsplash.com)：📷 这是一个很好的资源，可以用来寻找您可以在项目中使用的好看的，高分辨率的免费图片。
- [unDraw](https://undraw.co/)： 📐 和 Unsplash 类似，但是提供了超赞的矢量插图。

## IDE 工具

- [Material-UI Snippets](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets)：提供编写提示的 VSCode 扩展。
- [Material-UI Codemorphs](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs)：提供代码模块的 VSCode 扩展。
- [eslint: detect unused classes](https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes)：ESLint 插件检测到 `@material-ui/styles` 中未使用的类。

## Components 组件

这是一个扩展 Material-UI 的第三方项目的集合。

### 布局

- [@mui-treasury/layout](https://mui-treasury.com/layout)：处理一个页面整体布局的组件。 您可以找到几个相关的例子，例如： [a reactjs.org clone](https://mui-treasury.com/layout/clones/reactjs)。

### 通知

- [notistack](https://github.com/iamhosseindhv/notistack)：轻松地显示消息条（snackbars）（所以您不必手动处理它们的打开/关闭状态）。

### 上传

- [material-ui-dropzone](https://github.com/Yuvaleros/material-ui-dropzone)：建立在 react-dropzone 的基础上的组件。

### 表单

- 使用 [formik-material-ui](https://github.com/stackworx/formik-material-ui) 将 Material-UI 和 [formik](https://jaredpalmer.com/formik) 结合使用。
- 使用 [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) 将 Material-UI 和 [Redux Form](https://redux-form.com/) 结合使用。
- 使用 [mui-rff](https://github.com/lookfirst/mui-rff) 将 Material-UI 和 [React Final Form](https://final-form.org/react) 结合使用。
- [data-driven-forms MUI mapper](https://github.com/data-driven-forms/react-forms/tree/master/packages/mui-component-mapper) Bindings 可以实现将 Material-UI 与 [数据驱动表单（Data Driven Forms）](https://data-driven-forms.org/) 一起使用。

### 幻灯片

- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel)：向新用户介绍您的应用程序。

### 图像

- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image)：图片在完全加载之前都是很简陋的。 使用 material 图像来物化它！ 它会像 material 图像的加载模式建议的一样淡入。

### 分页组件 Pagination 

- [material-ui-flat-pagination](https://github.com/szmslab/material-ui-flat-pagination)：一个基于 Material-UI 的扁平化设计的分页组件。

### 日程表/日历

- [dx-react-scheduler-material-ui](https://devexpress.github.io/devextreme-reactive/react/scheduler/)：一个基于 Material-UI 的日程表/日历组件，它具有多个功能，包括日历视图、编辑、重复一些预约和日期导航（需要 [付费的许可证](https://js.devexpress.com/licensing/)）。

### 图表

- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/)：一个基于 Material-UI 的图表，它可以提供各种图表类型来可视化数据，包括条形图、线形图、面积图、散点图、饼图，以及更多（需要 [付费许可证](https://js.devexpress.com/licensing/)）。

### Dialog

- [material-ui-confirm](https://github.com/jonatanklosko/material-ui-confirm)：您无需编写模板代码，就可以轻松使用确认对话框功能来简化用户的确认操作。

### 颜色选择器

- [material-ui-color](https://github.com/mikbry/material-ui-color)：material-ui 的颜色组件集合。 无依赖包，安装体积小，可高度定制和主题支持！

## Blocks（块级元素）

- [components-extra](https://github.com/alexandre-lelain/components-extra)：提供给了一系列基于 Material-UI 而搭建的”分子（molecule）”组件，譬如一个页脚（Footer），一个 CookiesBanner，一个 BackToTop 按钮，以及一些其他复杂的组件，它们都是高度可自定义的，来帮助开发人员来迅速搭建 UI 的宏观部分。 这些组件往往在网站上重复 —— 这个库解决了这个问题。

## Theming 主题

- [create-mui-theme](https://react-theming.github.io/create-mui-theme/)：通过 Material Design Color Tool 创建 Material-UI 主题的在线工具。
- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/)：只需要选择颜色即可为你的 Material-UI 应用生成主题的工具，同时还支持在线预览。
- [Material palette generator](https://material.io/inline-tools/color/)：它可用于通过您输入的任何颜色生成一系列的调色板。