跳转到内容

学习使用 Material-UI

New to MUI? 如果你知道从哪里开始,就很容易学会! It's easy to learn if you know where to start! 而接下来的教程将帮助你快速入门。

Developers come to MUI from different backgrounds and with different learning styles. Whether you prefer a more theoretical or practical approach, we hope you'll find this section helpful. Like any unfamiliar technology, MUI does have a learning curve. 有了练习和耐心,你很快就会掌握其中的诀窍。 With practice and some patience, you will soon get the hang of it.

First example

您可以在 用法页面 找到一个带有实时编辑器的小小的 Material-UI 示例。 Even if you don't know anything about Material-UI yet, try changing the code and see how it affects the result.

Example projects

我们托管了 一些范例项目,他们都提供了开发和部署一个 React 网站所必须的架构。

模板

我们提供了一些 基本模板的选项 来帮助您开始开发应用程序。

⚠️ Note that the resources linked below are using MUI v4, which is not the latest major version. As v5 has been released recently, it will take some time till new contents are created. If you have created any learning material for v5, let us know and we can link them here.

When first learning MUI, you might find third-party blog posts, books and video courses more helpful than the official documentation. 以下是一些推荐资源,其中一些是免费的。 Here are some recommended resources, some of which are free.

免费的资源

  • Introduction to Material-UI:一系列涵盖所有重要的 Material-UI 组件的视频。
  • Meet Material-UI — your new favorite user interface library: 一篇博客文章,指导您构建 Todo MVC, 同时涵盖 Material-UI 的一些重要概念。
  • Learn React & Material-UI:一系列涵盖所有重要的 Material-UI 组件的视频。
  • Getting Started With Material-UI For React:一篇指导您构建简单的卡片列表的博文。
  • Elegant UX in React with Material-UI:一篇涵盖某些重要的 Material-UI 概念的博客文章
  • Implement high fidelity designs:一篇博客文章,涵盖了一些重要的 Material-UI 概念。

付费的资源

  • Implement high fidelity designs:在设计与开发之间架起一座桥梁。 将详细的设计一点点分解,并使用 Material-UI 和 React 来将其在现实生活中实现。

  • Apply Google Material Design:本课程教授 Google Material Design 的基础知识,以及如何使用 Material-UI 和 React 开发一个端到端的航班搜索和预订应用。

  • Cookbook:通过使用 Material-UI 在 React 中实现 Material Design 原则来构建现代应用程序。

参考手册

  • Builder Book: Learn how to build a full-stack JavaScript and SaaS web application from scratch, using a Modern JavaScript stack and Material-UI.