杭州电子商务研究院

安装并使用 Material UI 和 React

2020-10-29 08:00飞浪

介绍

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>;

此按钮的外观如下。

login_endIcon

现在来看看注销按钮。从@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组件来更改按钮的方向。

<div class="code-block -hljs-dark aem-GridColumn--tablet--12 aem-Gri
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
查看原文
曝光30482浏览1620