如何使用 Material-UI 创建导航栏？

Material UI 是谷歌为 React 组件设计的前端 UI 框架。它是使用 Less 构建的，Less 是 CSS 的一种向后兼容的语言扩展。我们已经使用 AppBar 组件在 ReactJS 中使用 Material-UI 创建了一个导航栏

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```
第 3 步：创建 React.js 应用程序后，使用以下命令安装material-UI模块。
```
npm install @material-ui/core
npm install @material-ui/icons
```

项目结构：它将如下所示。

示例：创建一个 Navbar.js 文件，我们将使用 Material UI 创建我们自己的 Navbar 组件，如下所示。

例子：

Navbar.js

// Importing files from Material-UI
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
  
// Using Inline Styling
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
}));
  
// Exporting Default Navbar to the App.js File
export default function Navbar() {
  const classes = useStyles();
  
  return (
    
      
        
          
              
          
          
            Geeks for Geeks
          
        
      
    
  );
}

App.js

// Importing the navbar component inside
// the main app file
import Navbar from "./components/Navbar";
  
const App = () =>{
  return (
    <>
               
    
  );
}
  
export default App;

创建 Navbar 组件后，我们将其导入到我们的 App.js 文件中，如下所示。

应用程序.js

// Importing the navbar component inside
// the main app file
import Navbar from "./components/Navbar";
  
const App = () =>{
  return (
    <>
               
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

导航栏演示

参考： https://material-ui.com/components/app-bar/