React MUI AppBar API

这篇文章将教你如何使用React MUI提供的AppBar API。 MUI 代表Material UI，它是一个提供组件API的框架，你可以使用它使你的网站更具吸引力。让我们来看看AppBar API。

React MUI AppBar API是MUI提供的组件API。这些AppBar类似于导航栏，通常会出现在网页的顶部。AppBar通常包含诸如菜单、下拉列表、登录按钮、个人资料图标等元素。我们在实现这个API时，你会更好地理解它。

语法：

<AppBar>
    {/* Components that you want to render on the AppBar */}
</AppBar>

属性： 此组件可用的属性如下：

classes： 用于扩展应用于组件的CSS样式。通过classes，我们可以对组件应用不同的CSS样式，使其更具吸引力。
color： 用于为我们的AppBar应用颜色。我们可以应用默认颜色和自定义颜色。
enableColorOnDark： 用于为我们的AppBar应用较深的颜色。
position： 与普通CSS中的定位相同。例如：如果将positioning属性设置为fixed，则我们的AppBar将固定在页面顶部，并且在页面向下滚动时不可见。
sx： 使用此属性，我们可以编写自定义CSS并应用于属性，而不是它们的默认值。我们还可以编写要应用于我们的AppBar的其他CSS。

让我们通过示例来了解。

步骤1： 创建一个名为appbar-react的文件夹。打开命令提示符并导航到appbar-react文件夹。现在输入以下命令。

npx create-react-app

步骤2： 再次，在相同的文件夹中，打开命令提示符并输入以下命令。

npm install @mui/material @emotion/react @emotion/styled

项目结构： 一旦安装完成，您应该拥有必要的起始文件。您的文件夹结构应该如下所示。

React MUI AppBar API

现在，在src文件夹中创建一个名为components的新文件夹。在components文件夹中，创建两个文件，分别命名为AppBarNavbarComponent.js和AppbarToggleComponent.js。您的更新后的文件夹结构应如下所示。

React MUI AppBar API

示例1： 在这个示例中，我们将在AppBar组件内部创建一个简单的导航栏。

AppBarNavbarComponent.js

import { AppBar } from '@mui/material'; 
import React from 'react'; 
  
const AppBarNavbarComponent = () => { 
    return ( 
        <> 
            <AppBar> 
                <ul id="nav-list"> 
                    <li>Home</li> 
                    <li>About</li> 
                    <li>Learn More</li> 
                    <li>Contact Us</li> 
                </ul> 
            </AppBar> 
        </> 
    ) 
} 
  
export default AppBarNavbarComponent

现在我们将为上面的组件添加一些CSS样式。下面是CSS代码。在你的src文件夹中，打开App.css文件，并输入以下代码。

App.css

#nav-list { 
    display: flex; 
} 
  
#nav-list li { 
    list-style-type: none; 
    padding: 20px; 
    border-radius: 10px; 
    transition: background 1s; 
} 
  
#nav-list li:hover { 
    cursor: pointer; 
    background-color: rgb(49 49 217); 
    font-weight: 600; 
} 
  
.theme { 
    padding: 13px; 
    margin: 13px; 
    border: none; 
    border-radius: 10px; 
    font-weight: 600; 
} 
  
#normal { 
    background-color: #fff; 
} 
  
#dark { 
    background-color: #000; 
    color: #fff; 
} 
  
.theme:hover { 
    cursor: pointer; 
}

现在打开src文件夹中的App.js。在App.js中，我们只是导入AppBarNavbarComponent并在return语句中呈现它。

App.js

import './App.css'; 
import AppBarNavbarComponent from  
    './components/AppBarNavbarComponent'; 
  
function App() { 
    return ( 
        <> 
            <AppBarNavbarComponent /> 
        </> 
    ); 
} 
  
export default App;

运行应用程序的步骤： 在相同的文件夹中打开命令提示符，并键入以下命令。

npm start

输出：

React MUI AppBar API

示例2: 在这个示例中，我们将创建两个按钮，用来改变我们的AppBar的颜色。我们将切换来在正常模式和深色模式之间进行切换。

AppBarToggleComponent.js

import { AppBar } from '@mui/material'
import React, { useState } from 'react'
  
const AppBarToggleComponent = () => { 
    const [theme, setTheme] = useState('transparent'); 
  
    const handleChange = () => { 
        setTheme('primary'); 
    } 
  
    const handleReset = () => { 
        setTheme('transparent'); 
    } 
  
    return ( 
        <> 
            <AppBar color={theme}> 
                <div> 
                    <button className="theme" id="normal" 
                        onClick={handleReset}> 
                        Transparent Theme 
                    </button> 
                    <button className="theme" id="dark" 
                        onClick={handleChange}> 
                        Primary Theme 
                    </button> 
                </div> 
            </AppBar> 
        </> 
    ) 
} 
  
export default AppBarToggleComponent

现在，打开src文件夹中的App.js。在App.js中，我们仅仅引入AppBarToggleComponent并将其渲染在return语句中。另外，我们还引入了App.css文件。同样的CSS文件被两个示例都使用。

App.js

import './App.css'; 
import AppBarToggleComponent from  
    './components/AppBarToggleComponent'; 
  
function App() { 
    return ( 
        <> 
            <AppBarToggleComponent /> 
        </> 
    ); 
} 
  
export default App;