Material UI 的安装与使用

Material UI 的安装使用 (附练习demo)

Material UI ( 也称 MUI ) 是一个开源的React组件库，实现了Google的Material Design。
它包括一个全面的预构建组件集合，开箱即用，可用于生产。
材料UI设计精美，并具有一套自定义选项，可以在我们的组件之上轻松实现自己的自定义设计系统。

Material 也是 react 首推使用的 UI 框架, 接下来我们来安装它

// 使用 npm 安装
npm install @mui/material @emotion/react @emotion/styled

// 使用 yarn 安装
yarn add @mui/material @emotion/react @emotion/styled

请注意，安装依赖于 react 的 17.0.0 及以上版本，和 react-dom >= 17.0.0 及以上版本。

然后导入 Mui 字体链接

// 1. Roboto 字体
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
// 2.字体图标
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

如果需要使用 svg 图标，需要在项目路径终端中安装依赖

// 使用 npm 安装
npm install @mui/icons-material

// 使用 yarn 安装
yarn add @mui/icons-material

添加视口标签
Material UI 是移动优先的，在 index.html 模板中需要添加以下视口标签

<meta name="viewport" content="initial-scale=1, width=device-width" />

使用 Material UI

安装成功后就可以在组件用引用了，查看示例

// 路径 pages/hello.jsx
// 导入 react
import * as React from 'react';
// 导入 MUI 按钮组件
import Button from '@mui/material/Button';

// 定义 Hello 页面
export default function Hello() {
		// 使用组件
  return <Button variant="contained">hello,world</Button>;
}

在 index.js 中导入 Hello 组件并且渲染出来

import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入页面组件
import Hello from './pages/Hello';
// 导入 css 样式
import "./css/index.css";
// 获取根元素
const root = ReactDOM.createRoot(document.getElementById('root'));

// 渲染到根元素
root.render(
  // 使用严格模式
  <React.StrictMode>
    {/* hello world 页面 */}
    <Hello ></Hello >
  </React.StrictMode>
);

在终端中运行即可在 localhost:3000 看到效果

npm run start  ||  yarn start

其他组件也是同理，就不展示了。

学习完这个框架的使用后，我写了个基于 MUI + React 的移动端考试页面，如果需要可以 clone 下来查看下如何使用 MUI, 如果可以的话希望给个 start 谢谢!

移动端女友考试题项目预览: 在线演示地址
源码地址： 点击进入