MUI components

MUI 组件

使用 React Material UI 设计 UI 元素样式的指南

反应模板

每个布局的各个部分都通过注释或使用单独的文件来明确定义，从而可以轻松提取页面的某些部分（例如“英雄单元”或页脚）以便在其他页面中重用。对于多部分示例，链接源代码位置的自述文件中的表格描述了每个文件的用途。

默认断点

每个断点（一个键）与一个固定的屏幕宽度（一个值）匹配：

• xs ，超小号：0px
• sm ，小：600px
• MD ，中：900px
• LG ，大：1200px
• xl ，超大：1536px

---

 cd /d G: O thers r eact v ite-project
 npm run dev
 http://localhost:5173/

---

展示柜

使用 Material UI 查看这些公共应用程序，以获得下一个项目的灵感。

主题化

以下实用程序可以帮助您自定义主题并能够在浏览器中更改主题。

• 创建 Material-UI 主题 - 通过 Material Design Color Tool 创建 MUI 主题的在线工具。
• Material-UI Theme Generator - Material-UI 主题/调色板生成器。
• Material-UI 主题编辑器 - 只需选择颜色并进行实时预览即可为 MUI 应用程序生成主题的工具。

相关项目

Material-UI 设计系列项目。

• material-ui-theme-editor - 为 Material UI 应用程序生成主题的工具，具有实时预览功能。
• Material 调色板生成器 - 官方 Material Design 调色板生成器可用于为您选择的任何颜色生成调色板。
• 额外组件 - 提供一组构建在 Material-UI 之上的“分子”组件，例如页脚、CookiesBanner、BackToTop 按钮和其他高度可定制的复杂元素，以帮助开发人员快速构建 UI 的宏部分。这些组件通常在各个站点之间重复 - 这个库解决了这个确切的问题。
• React Admin - 一个前端框架，用于使用 ES6、React 和 Material Design 在 REST/GraphQL API 之上构建在浏览器中运行的管理应用程序。
• Material UI Snippets - 提供片段的 VSCode 扩展。
• Material UI Codemorphs - 提供 codemod 的 VSCode 扩展。
• Eslint：检测未使用的类 - ESLint 插件用于使用@mui/styles检测未使用的样式类。

成分

使用 Material-UI Design 构建的 UI 组件列表。

• Material-UI 密码字段 - 使用 Material-UI 的密码字段。
• 全屏对话框 - Material-UI 的全屏对话框.
• Material-UI Upload - 使用 FileAPI 上传在 Material-UI 中制作的控件。
• Super Select Field - Material-UI 的多选自动完成下拉组件。
• Material JSON Schema Form - 从 json 生成的 Material-UI 表单。
• Notistack -Material-UI 的简单小吃栏（因此您不必处理它们的打开/关闭状态）。
• Material-UI Dropzone - 基于 React-dropzone 构建的 Material-UI 组件.
• Formik-Material-UI - 将 Material-UI 与 formik 结合使用的绑定.
• Redux-Form-Material-UI - 包装组件，以方便将 Material-UI 与 Redux Form 一起使用。
• Final-Form-Material-UI - 包装组件，以方便将 Material-UI 与 Final Form 一起使用。
• Material-UI Auto Rotating Carousel - Material 风格的轮播。
• Material-UI Image - 带有加载动画的 Material 风格图像。
• Material-UI Flat Pagination - Material-UI 的平面设计分页组件。
• Dx-react-scheduler-Material-UI -Material-UI 的调度程序/日历组件。
• dx-react-chart-Material-UI - Material-UI 图表，使用各种系列类型（包括条形图、折线图、面积图、散点图、饼图等）可视化数据。
• Material-UI Medium Blog - 扩展 Material-UI Card 组件以显示 Medium 博客.
• React Github Repo Cards - 扩展 Material-UI Card 组件以显示 GitHub 存储库。
• React molecular-components - 基于 Material-UI 的 React 分子组件.
• Material-UI NestedMenuItem - 使用无限嵌套菜单直接替换 MUI 的 MenuItem，并在悬停时打开。
• React-planet - 创建看起来像行星的圆形菜单。