如何在React中实现Material-UI

DebugUsery
902 阅读4分钟

如何在React中实现Material-UI

React.js是创建Web应用程序时使用的主要框架之一。它使开发人员能够创建SEO友好和高度互动的组件。React.js的功能还能提升维护和整体生产力。在React.js项目中，Material UI库的整合将事情提升到一个新的水平。

Material-UI的介绍

Material-UI只是一个库，它允许我们导入和使用不同的组件，在我们的React应用程序中创建一个用户界面。这节省了大量的时间，因为开发人员不需要从头开始编写一切。

Material-UI部件在很大程度上受到谷歌构建用户界面原则的启发。因此，开发人员很容易建立视觉上吸引人的应用程序。

目标

在React.js应用程序中加入Material-UI库并使用其组件。

前提条件

在本教程中，请确保你的电脑上安装了[npm]。我们将使用npm下载并在我们的应用程序中安装所需的依赖项。你还需要一个代码编辑器。本教程使用Visual Studio Code。

让我们跳到很酷的东西。

第1步 - 开始工作

导航到你想要的文件夹，通过在终端或cmd中输入以下命令，创建一个React项目。

npx create-react-app materialuiexample

请注意，这个构建过程可能需要一些时间，取决于你的网速。

一旦安装完成，在你的代码编辑器中打开该文件夹。然后，输入npm start ，启动开发服务器。你可以通过在浏览器中导航到http://localhost:3000/ ，查看默认的React应用程序。

第2步 - 安装Material-UI的依赖项

我们必须安装Material-UI以访问其不同的功能或组件。打开你的终端，并确保你在你的应用程序的主文件夹内。

在终端中输入npm install @material-ui/core ，然后点击enter.

运行下面的命令，在我们的项目中使用Material-UI图标。

npm install @material-ui/icons

我们可以通过检查package.json来确认上述依赖性已经安装。如下图所示。

"dependencies": {
    "@material-ui/core": "^4.11.2", //material-ui
    "@material-ui/icons": "^4.11.2", //material-ui icons
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

第3步 - 修改项目

默认情况下，每个React项目都带有某些文件和模板。例如，当你导航到http://localhost:3000/ ，你会注意到你有一个带有react标志的网页。让我们消除这些元素以避免混淆。打开你的app.js 文件，删除div 标签中的所有代码。

import './App.css';

function App() {
  return (
    <div className="App">
      {/* code goes here */}
    </div>
  );
}

export default App;

第4步 - Material-UI组件的应用

为了使用Material-UI组件，我们首先需要把它们导入我们的项目。这一点已经完成，如下图所示。

import './App.css';
import {Button} from '@material-ui/core'; //importing material ui component

function App() {
  return (
    <div className="App">
      <Button> Press me </Button> //using the material ui component in our project
    </div>
  );
}

export default App;

当你刷新你的浏览器时，你会看到一个button ，上面写着press me 。然而，这个按钮的样式并不正确。我们可以使用props ，来对按钮以及其他组件进行样式设计。Props 是传递给元素的基本属性。

我们在项目中导入的Material-UI按钮是有样式的，如下图所示。

 <Button color="primary" variant="contained"> Press me </Button>

我们也可以在我们的项目中导入并使用一个TextField部件，如下图所示。

<TextField id="name" label="Name" variant="outlined" />

在上面的例子中，variant 变量帮助我们定义我们的TextField应该如何出现。

我们还可以创建一个独立的组件并将其导入另一个文件。例如，让我们创建一个独立的NavBar 组件。在src 文件夹中，创建一个新文件，并命名为NavBar.js 。在这个文件中添加以下代码。

import React from "react";
import {AppBar, Toolbar, Typography} from '@material-ui/core';

function Header(){
    return (
      <AppBar position='static'>
         <Toolbar>
             <Typography>React Navbar Example</Typography>
         </Toolbar>
      </AppBar>

    );
}
export default Header;

注意，AppBar,Toolbar, 和Typography 都是Material-UI部件的一部分。排版小组件有助于突出将出现在工具栏中的项目。在我们的例子中，工具栏将显示标题React Navbar Example 。

下一步是将上述组件导入app.js文件中。要做到这一点，在app.js 文件的顶部添加以下一行--在导入语句中。

import Header from './NavBar.js';

我们可以通过在div 标签中添加<Header/> 来使用该部件。

这里是完整的代码。

import './App.css';
import {Button} from '@material-ui/core'; //importing material ui component
import {TextField} from '@material-ui/core';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Header from './NavBar.js';

function App() {
  return (
    <div className="App">
    <br/>
       <Header/> //importing the navbar component
      <Button color="primary" variant="contained"> Press me </Button> 
      <br/><br/>
      <TextField id="outlined-basic" label="Name" variant="outlined" />
      <br/><br/>
      <AccountCircle/>

    </div>
  );
}

export default App;

你可以按照这个例子在你的项目中加入其他Material-UI部件。

总结

从上面的教程中，我们已经学到了。

  • Material-UI需要什么。
  • 如何在ReactJS应用程序中添加Material-UI的依赖性。
  • 如何使用Material-UI组件和图标。

我们还看到，通过在React应用程序中加入Material-UI，建立高度吸引人的网站是多么容易。因此，你可以使用这些信息来构建遵守材料设计原则的复杂应用程序。

avatar
文章
阅读
粉丝