React框架之MaterialUI详解 （一）开始_material ui react

写在前面的废话

React框架有很多，基本上主流的我都用过，小众的我也用过，但是MaterialUI是我用的最顺手的一个框架，几曾何时我也想过自己整一个框架，后来还是放弃了，主要是精力和时间跟不上。再说了，就是现在的框架已经非常优秀了， 没有必要再一个轮子。
Material UI 是一个开源的 React 组件库，实现了 Google 的 Material 设计风格。它功能全面，开箱即用。

创建项目

首先我们要创建React应用项目用于我们的学习。我喜欢Vite来创建，而不喜欢create-react-app。Vite的性能应该是碾压性的。创建方法请参照我的这篇文章：React一学就会(1): 项目的创建

安装

在我们创建的React项目根目录下运行下列命令之一就可以将MUI添加到我们的项目。

// npm 安装方式
npm install @mui/material @emotion/react @emotion/styled

// yarn 安装方式
yarn add @mui/material @emotion/react @emotion/styled
1
2
3
4
5

MUI中的带样式化的组件默认是使用的 Emotion ，关于Emotion的使用请参考我的另一个系列教程 [React Emotion 如何优雅的使用样式（一）](React Emotion 如何优雅的使用样式（一）-CSDN博客)，在本系列文章中不做介绍。

MUI中使用Roboto font做为默认字体样式，所以我们要把字体添加到项目中：

// npm 安装方式
npm install @fontsource/roboto

//yarn 安装方式
yarn add @fontsource/roboto
1
2
3
4
5

MUI还提供了丰富的图标组件，安装它就可以使用：

yarn add @mui/icons-material

// npm 
npm install @mui/icons-material
1
2
3
4

图标明细请[点击](Material Symbols and Icons - Google Fonts)这里查看。

使用

安装好后我们就可以来小试一下牛刀：

import * as React from 'react';
import Button from '@mui/material/Button';

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}
1
2
3
4
5
6