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 字体
<linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
// 2.字体图标
<linkrel="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>
);