安装并使用 Material UI 和 React
介绍
Material-UI拥有超过 60,000 个GitHub 星标，是最受欢迎的 React UI 库之一。它具有组件、样式、主题、图标等，可作为满足您所有样式需求的单一资源。
在本指南中，我们将讨论如何安装 Material-UI、导入组件以及在 React 应用程序中使用它们。
安装
要安装 Material-UI，请在 React 项目的根目录中运行以下命令。
npm install @material-ui/core
或者如果您更喜欢yarn，请运行以下命令。
yarn add @material-ui/core
Material-UI 与 Roboto 字体配合使用效果最佳，但 Material-UI 不会自动加载该字体，因此您必须自行添加。有很多方法可以做到这一点。其中一种更简单的方法是使用 Google Web Fonts。
将以下代码添加到public/index.html文件的<head>标签中。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
图标
使用 Material-UI，您可以同时使用字体图标和 SVG 图标。要使用字体图标，请将以下代码添加到public/index.html文件的<head>标签中。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
要使用 SVG 图标，请运行以下命令，并安装@material-ui/icons作为依赖项。
npm install @material-ui/icons
基本用法
在本节中，我们将讨论如何在您的应用中使用 Material-UI。我们将使用各种 props 来设置<Button>组件的样式。
按钮
要使用任何 Material-UI 组件，首先要做的是导入该组件。在您的App.js中，将以下代码与其他导入一起添加到顶部。
import React from "react";
import { Button } from '@material-ui/core';
或者您可以通过从库中提取特定组件来导入。
import Button from '@material-ui/core/Button';
现在在App()函数内部使用此组件，然后传递color属性中的primary和variant属性中的included。
export default function App() {
return (
<div>
<Button color="primary" variant="contained">
Click Me
</Button>
</div>
);
}
此按钮的外观如下。
您可以通过将size属性传递给Button组件来更改大小。此size属性可以采用small、medium和large作为其值。
<Button size="large" color="primary" variant="contained">
Click Me
</Button>
此按钮的外观如下。
您还可以使用startIcon和endIcon属性向此按钮添加图标；顾名思义，startIcon在按钮文本前添加图标，而endIcon在按钮文本后添加图标。
但首先，您需要将图标导入到您的App.js中。在此示例中，您将创建登录和注销按钮。您可以在此处搜索所需的图标。
从@material-ui/icons导入AccountCircle图标。
import LoginIcon from '@material-ui/icons/AccountCircle';
现在，将此LoginIcon传递给Button组件的startIcon属性。
<Button startIcon={<LoginIcon />} color="primary" variant="contained">
Login
</Button>
此按钮的外观如下。
您也可以将此图标传递给endIcon道具。
<Button endIcon={<LoginIcon />} color="primary" variant="contained">
Login
</Button>;
此按钮的外观如下。
现在来看看注销按钮。从@material-ui/icons导入ExitToApp图标。
import LogoutIcon from '@material-ui/icons/ExitToApp';
对于注销按钮，将次要元素传递给颜色属性，这将使按钮变为红色；这是有意义的，因为它是一个注销按钮。
<Button startIcon={<LogoutIcon />} color="secondary" variant="contained">
Logout
</Button>
此按钮的外观如下。
您可以使用ButtonGroup组件进一步对这些按钮进行分组。首先，将ButtonGroup组件导入App.js。
import ButtonGroup from "@material-ui/core/ButtonGroup";
使用ButtonGroup，从按钮中删除重复的道具并将它们传递给ButtonGroup。
例如，这里varaint="contained"对两个按钮来说是通用的，因此您可以将其传递给ButtonGroup并将其从各个按钮中删除。
<ButtonGroup variant="contained">
<Button endIcon={<LoginIcon />} color="primary">
Login
</Button>
<Button startIcon={<LogoutIcon />} color="secondary">
Logout
</Button>
</ButtonGroup>
它看起来是这样的。
您还可以通过将方向属性传递给ButtonGroup组件来更改按钮的方向。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~