学习资源
Material-UI 新手? 我们为你精心准备的学习资源,可以帮助你快速入门。
第一个组件
下面的代码片段展示了一个基本的Material UI应用,它有一个 <Button>
组件:
import * as React from 'react';
import Button from '@mui/material/Button';
function App() {
return <Button variant="contained">Hello World</Button>;
}
在下面的交互式演示中,尝试更改代码并查看它如何影响输出。 (注:将 varian
更改为 "outlined"
并且 color
更改为 "secondary"
。 For more options, see the Button
component page.)
示例项目
Visit the example projects page to see how we recommend implementing Material UI with various React libraries and frameworks like Next.js, Gatsby, Create React App, and more.
模板
Check out our selection of basic templates to get started building your next app more quickly.
推荐资源
除了官方文档外,还有无数来自社区的成员,他们创建了非常好的教程和指南指导如何使用Material UI。
以下是我们找到的一些最好的第三方学习资源,可以学习如何使用我们的组件来构建漂亮的应用。
免费的资源
Material UI v5 Crash Course by Laith Harb:使用最新版Material UI构建应用须知
React + Material UI - From Zero to Hero by Atheast 开发者:深入浅出地介绍了从基本的搭建到高级组件的实现。
Next.js 11 Setup with Material UI v5 by Leo Roese: 学习如何使用 Emode 作为样式引擎,将Material UI 整合到您的Next.js 应用。
Material UI v5 Crash Course + Intro to React (2022 Edition) by Anthony Sistilli: how and why to use Material UI, plus guidance on theming and style customization.
Material UI v5 Tutorial Playlist by Nikhil Thadani (Indian Coders): a detailed playlist covering almost every component of Material UI with Create React App.
The Clever Dev and The Smart Devpreneur by Jon M: dozens of high-quality videos and articles digging deep into the nuts and bolts of Material UI.