如何使用material UI在Appbar的右侧设置图标
使用Material-UI在AppBar的右侧设置图标可以通过以下步骤实现：
- 首先，确保你已经安装了Material-UI库。你可以通过以下命令使用npm进行安装：
npm install @material-ui/core- 在你的代码中引入所需的组件和图标。例如，你可以使用以下代码引入AppBar和IconButton组件以及所需的图标：
import React from 'react';
import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
import { AccountCircle } from '@material-ui/icons';- 在你的组件中使用AppBar组件，并在其内部添加Toolbar和其他所需的组件。例如，你可以使用以下代码创建一个带有图标的AppBar：
function MyApp() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">My App</Typography>
<IconButton edge="end" color="inherit">
<AccountCircle />
</IconButton>
</Toolbar>
</AppBar>
{/* 其他组件内容 */}
</div>
);
}在上述代码中，我们使用Typography组件添加了一个标题，并使用IconButton组件添加了一个图标按钮。IconButton的edge属性设置为"end"，将图标按钮放置在AppBar的右侧。
- 根据需要，你可以进一步自定义AppBar和图标按钮的样式。例如，你可以使用AppBar的style属性来设置背景颜色：
<AppBar position="static" style={{ backgroundColor: '#f44336' }}>- 最后，根据你的实际需求，可以使用其他Material-UI组件和功能来扩展和定制你的AppBar。你可以参考Material-UI官方文档以获取更多信息和示例。
这是一个使用Material-UI在AppBar的右侧设置图标的基本示例。请注意，这只是一个简单的示例，你可以根据自己的需求进行进一步的定制和扩展。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有这个素材-UI AppBar： import React from 'react'
import AppBar from 'material-ui/AppBar'
import AccountCircle from 'material-ui-icons/AccountCircle'
import Toolbar from 'material-ui/Toolbar'
import IconButton from 'material-ui/IconButton'
import HomeIcon from '
浏览 10提问于2019-05-21得票数 2
我想在我的应用程序的标题中使用Material-UI中的圆形进度指示器。但我只是不知道如何很好地适应下载图标从材料图标内，使进度条将移动的图标。这是我现在所拥有的： ? 我想要实现这一点： ? 我试着用绝对定位来放置图标，但可能有一个更好的主意 import React from "react";
import ReactDOM from "react-dom";
import CircularProgress from "@material-ui/core/CircularProgress";
import Button fr
浏览 8提问于2020-04-30得票数 1
回答已采纳
刚接触Material UI和flex时，我已经阅读了很多文档，但由于某些原因，我不知道如何使用Material UI <CancelIcon />并仅在<Drawer />中对齐该图标。我读过，为了防止<Drawer />内联，我需要使用flexDirection: 'column'。 代码 <Drawer
{...{
anchor: 'right',
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div c
浏览 38提问于2021-01-15得票数 0
回答已采纳
我需要使用没有左图标的应用程序栏组件。
我试图忽略iconElementLeft属性，但它不起作用，图标仍然出现。
import React from 'react';
import AppBar from 'material-ui/AppBar';
const AppBar = () => (
<AppBar
title="Title"
/>
);
export default AppBar;
有没有办法去掉左边的图标？
浏览 10提问于2016-07-31得票数 11
回答已采纳
我正在尝试制作一个Appbar组件。我在左边的side.Now上有一个菜单图标和公司名称，我想在Appbar组件的最右边显示配置文件图标、通知图标和欢迎字符串。
我使用了带有using left:auto属性的div标签，但我希望使用网格组件来完成。
import React, { Component } from "react";
import Appbar from "@material-ui/core/AppBar";
import { Toolbar, IconButton, Typography, Avatar, Grid } from "@m
浏览 21提问于2019-07-30得票数 0
我一直在寻找一种方法将纯图像文件插入到官方文档的Material-UI的AppBar中，但似乎只有文本图标或SVG图标才能放入AppBar中。有没有办法在AppBar中显示实际的图像？
浏览 3提问于2016-09-14得票数 2
2回答
材质UI图标中的标签
、、、
我在react项目中使用material-ui和material-ui图标。我是新来的react。 有没有人能教我怎么做带标签的图标？我想把标签放在图标的正下方。例如，文本"Home“写在"Home Icons”下。我正在尝试实现一些类似于微软团队在侧边栏导航(web版)中实现的东西。 我读了API，发现里面有一个道具组件。然而，每当我使用它的时候，我都在尝试，图标消失了。 请访问此链接https://codesandbox.io/s/material-demo-forked-nohsm?file=/demo.js我将获得以下结果： ? 这是我的代码 import R
浏览 27提问于2020-10-01得票数 0
回答已采纳
我正在使用基于函数的组件构建一个应用程序。我在类中从Material 中找到了侧栏菜单模板，并希望将其转换为functional 。但是在转换之后，单击按钮就不能工作了。我只将菜单图标更改为另一个。任何帮助都将不胜感激。
以下是类中的默认组件
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@ma
浏览 2提问于2020-09-20得票数 1
回答已采纳
下面是为应用程序创建导航栏/标题的代码。我使用了material-ui。
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
浏览 2提问于2021-05-07得票数 1
2回答
所以我想知道当有人点击应用程序栏上的菜单图标时，我如何创建一个在左边弹出的菜单。我只想说清楚，我说的是带按钮的应用程序。这是它的代码：
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-
浏览 0提问于2018-08-06得票数 0
回答已采纳
我试图创建一个基本的导航栏的材料用户界面。Material的doc站点上的样板模板在浏览器中返回以下错误：
“试图导入错误：‘@material ui/图标’不包含默认导出(导入为‘MenuIcon’)。”
我使用npm安装了@material/core和@material/图标。请参见package.json：
{
"name": "profile_v4",
"version": "0.1.0",
"private": true,
"dependencies": {
浏览 4提问于2021-01-01得票数 1
回答已采纳
2回答
我已经创建了一个物料UI持久抽屉，其中有一个列表项组件，它的目标是在用户单击列表项时更改图标颜色。但我的造型只是使用Material图标，而不是使用外部SVG。
下面是同一个项目的代码框，以便更好地理解它。
这里是呈现我的AppBarDrawer.js组件的父组件。工作良好，可以忽略
import React from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer fr
浏览 7提问于2021-04-14得票数 1
回答已采纳
我根据上给出的示例创建了一个带有菜单的AppBar，它只需要一个菜单就可以很好地工作。但是，当我尝试添加第二个下拉菜单时，单击任一图标，都会得到与图像中相同的一组MenuItems。
import React, { Component } from 'react';
// Material UI Imports
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'ma
浏览 8提问于2018-01-09得票数 12
回答已采纳
3回答
? 上面的图片就是我目前所得到的。我想把图标放在右端。我现在正在使用material-ui设计。我该怎么做呢？ import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
Grid, AppBar, Toolbar, Typography
} from '@material-ui/core';
import ShoppingCartIcon from '@material-ui/icons/Sho
浏览 16提问于2019-06-25得票数 2
回答已采纳
我尝试使用iconStyleLeft更改左边默认汉堡图标的颜色，但颜色保持不变。
import React from 'react';
import AppBar from 'material-ui/AppBar';
import {grey50, grey900 } from 'material-ui/styles/colors';
const NavBar = () => (
<div>
<AppBar
title="Home-pro"
titleStyle
浏览 44提问于2018-01-09得票数 0
回答已采纳
我是新的反应js .Just开始构建一个简单的反应应用程序。我有两个按钮放置在每一边，这是我试图做的CSS- flex，但无法取得成功。有人能告诉我哪里出了问题吗？
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
浏览 0提问于2019-04-13得票数 0
回答已采纳
1回答
我试图导入一些图标和我的网站，但材料ui文档显示一些代码，不允许我改变现有的图标。
import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import CssBaseline from '@mui/material/CssBaseline';
import AppBar from '@mui/material/AppBar';
import To
浏览 11提问于2022-11-21得票数 0
我正在尝试使用FlexBox在material-ui FlatButton中对齐一个谷歌材料图标。我尝试了几种排列，但总是得到相同的结果--图标位于按钮的最底部。我不确定这是否是material-ui特定的问题。如何才能正确地实现对齐？
<FlatButton
style = {buttonStyle}
onClick = {
onIncrementClick
}
icon={<i style= {{display:'flex', alignItems:'center', verticalAlign:
浏览 0提问于2016-04-12得票数 1
在使用material-ui-next ("material-ui"："^1.0.0-beta.22"，)时，我无法确定是否使用了正确的方法使登录/注销按钮浮动。
似乎他们从应用程序接口中删除了iconElementRight=。我们现在必须在应用程序栏中使用<Grid>吗？这让人感觉有点不对劲。在appbar中浮动按钮(例如登录)的正确方式是什么？
<AppBar position="static">
<Toolbar>
<Grid container spacing={24
浏览 4提问于2017-12-07得票数 74
回答已采纳
2回答
我在将以下代码添加到新创建的reactJS + Material-UI应用程序时遇到了问题
要集成的代码
state = { icon: true }
handleClick = e => {
const { icon } = this.state
this.setState({ icon: !icon })
}
render() {
const { icon } = this.state
return(
<i className='large material-icons' onClick={this.ha
浏览 0提问于2019-07-07得票数 0
我遵循了在线视频中的教程，但是我得到了这样的错误代码：
编译./node_modules/@material-ui/icons/Menu.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/interopRequireDefault' inb'C:\LocalServer\static-page\node_modules\@material-ui\icons'失败，此错误发生在构建过程中，不能排除。
这是我编写的代码：
import React, {Componen
浏览 0提问于2019-01-28得票数 1
回答已采纳
我目前有一个项目，如下所示：
我正在尝试这样做，以便当您单击购物车图标并进入购物车时，购物车图标将消失。但是，当我尝试为location.pathname编写逻辑时，它最终删除了products页面上的购物车图标，如下所示：
我如何修复这个问题，以便只有当我实际处于购物车部分时购物车项目才会消失(我已经使用react路由器链接到购物车部分)？
我的导航栏组件：
import React from "react";
import {
AppBar,
Toolbar,
IconButton,
Badge,
MenuItem,
Menu,
浏览 21提问于2021-06-09得票数 0
回答已采纳
2回答
我正在构建一个react web应用程序。我正在为它使用材料ui。我希望有一个像谷歌收件箱(屏幕截图附在下面)的应用程序栏。目前我已经从材料ui模块导入Appbar，但它只包含标题，导航图标。我想有一个搜索栏，头像等在我的应用程序栏，就像谷歌收件箱。我如何定制它才能得到这样的设计。我是否必须调整material ui的appbar (如果是，那么具体如何调整)，或者我必须做其他事情？
浏览 0提问于2016-10-25得票数 4
在官方的material-ui文档中，AppBar组件的示例如下所示：
import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
impo
浏览 1提问于2017-08-30得票数 0
我正在尝试使用System.JS将material-ui导入我的React应用程序
在我的应用程序中，我这样做：
import {AppBar, Tabs, Tab, Card, CardTitle} from 'material-ui';
下面是我的System.JS配置：
System.config({
baseURL: '/node_modules',
packageConfigPaths: [
'*/package.json'
],
packages: {
'.
浏览 52提问于2017-02-11得票数 16
回答已采纳
当用户重新加载、访问新页面或在浏览器上按回时，我如何让我的亮/暗主题持久保存为一种状态...现在它是非常不一致的。 这是我设置主题的index.js。我把它包装在我的组件上。 index.js import { ThemeProvider, CssBaseline } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core";
const MyThemeContext = React.createContext({});
export function useM
浏览 21提问于2021-01-16得票数 1
回答已采纳
1回答
如何在物料界面设置下拉菜单位置
、、、、
我正在构建一个Gatsby应用程序，我想一旦菜单图标被点击，我的菜单将下拉下拉的权利和宽度为100%。下面是我的代码： 我试图通过在组件中设置它来解决这个问题，但是组件根本没有改变： getContentAnchorEl={null}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOri
浏览 19提问于2020-07-15得票数 1
我正在使用Material UI创建一个带有临时抽屉的导航栏。当用户单击汉堡包菜单图标时，我希望菜单淡入屏幕并从右侧滑动。
基本上，所有的功能都可以工作，除了名为“RIGHT”的按钮，而不是我在它旁边创建的汉堡图标。
我试着去掉“右”，用图标代替，但是当我这样做的时候，菜单从左上角出来了……
import React, { useEffect, useState } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import { AppBar, IconButto
浏览 20提问于2021-05-18得票数 1
使用material-ui和react/jsx，我有了一个AppBar。我想添加一个带有徽章(数字)的通知菜单图标，即显示新通知的数量。
问题是徽章将不能正确显示。也就是说，具有奇怪的风格和外观。
下面是我已经尝试过的
<AppBar>
<IconMenu anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'bottom'
浏览 8提问于2016-11-23得票数 1
6回答
我开始使用React/Material，也开始使用CSS等.我有一个简单的APPBar页面布局。不幸的是，这个AppBar重叠了它下面的元素。
我找到了这个答案：
但这感觉完全不对。如果我的AppBar有一个可变的高度，取决于图标，显示模式等.呢？
我试着创建一个垂直网格，将元素封装在不同的项目中，使顶部的容器成为一个灵活的容器，并使用flex设置，似乎没有什么工作，应用程序条总是位于文本的顶部。
代码非常简单：
import React from 'react';
import { AppBar, Typography, Box } from '@material-u
浏览 2提问于2019-11-05得票数 8
回答已采纳
我试图运行以下代码：
"use strict";
var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var Material = require('material-ui');
var ThemeManager = new Material.Styles.ThemeManager();
var Colors = Material.Styles.Colors;
var dropdown = Mat
浏览 3提问于2015-09-20得票数 2
回答已采纳
2回答
我是Flutter的新手，正在尝试构建一个简单的UI，但遇到了一个问题。我做了一个里面有图标的AppBar。我使用Align类将其移动到右侧，但它停留在左侧。这是我的main.dart文件： void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
home: Scaffold (
appBar: AppBar(
浏览 54提问于2020-07-29得票数 0
回答已采纳
2回答
我正在尝试使用<Typography align="center">作为页脚，以使文本居中对齐，但它不起作用。如何将文本居中对齐？
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
im
浏览 4提问于2021-06-13得票数 0
我正在尝试使用我的自定义颜色的AppBar标题。AppBar的标题是“我的应用程序栏”。我使用白色作为我的主题色。它对工具栏很有效，但AppBar的“标题”也使用了相同的“白色”颜色。
下面是我的代码：
import React from 'react';
import * as Colors from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from &#
浏览 3提问于2016-08-25得票数 39
如何在滚动时自动隐藏Reactjs <AppBar/>组件，如图1所示？
图1。<AppBar/>在滚动时自动隐藏
MyAppBar.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar
浏览 1提问于2019-01-27得票数 3
我在react中使用ts。如何将路径链接添加到我的代码中的选项卡 import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import
浏览 5提问于2020-08-11得票数 0
回答已采纳
我正在尝试解决如何让链接到组件的appbar按钮在激活时显示不同的样式。
我还应该注意:这是我的第一个material-ui应用程序，文档不是很清楚。
基本上我想要一个下划线的按钮，这是活动的。
<Button color="inherit" component={Link} to={"/"}>Home</Button>
<Button color="inherit" component={Link} to={"/About"}>About</Button>
我的完整代码。
impo
浏览 28提问于2019-07-10得票数 8
我在MaterialToolbar中使用MaterialToolbar，并且在菜单reource文件中设置了正确的属性。但是，当我单击搜索图标时，它不会展开。相反，搜索图标移动到左侧。再次单击它时，它会展开，但搜索图标仍然出现在EditText中。
布局文件
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.goog
浏览 0提问于2020-06-15得票数 2
回答已采纳
我正在尝试从Material-UI框架中获取AppBar ( )左侧的导航默认汉堡图标，以便在单击时滑动打开抽屉组件( )。但是一旦点击，我就会看到下面的错误，我看不出来：
未捕获的TypeError:无法读取未定义的属性“”open“”
任何关于它的见解或指导都将不胜感激。提前谢谢你。
import React, { Component } from 'react'
import { Drawer, AppBar, MenuItem} from 'material-ui'
import baseTheme from 'material-ui/sty
浏览 0提问于2016-05-21得票数 2
2回答
我在更改<AppBar>背景颜色时遇到问题。我使用Container组件来设置最大屏幕大小。 当屏幕尺寸大于最大屏幕尺寸时，这会导致问题。AppBar的背景颜色是预期的，其余的是白色。 如何删除白色并使其与<AppBar>背景色匹配？ ? 如何才能使白色与<AppBar>颜色相匹配，从而使导航看起来一致？ 这就是我到目前为止所知道的： import React from 'react';
import {CssBaseline, Container} from '@material-ui/core/';
import
浏览 20提问于2020-03-25得票数 0
我在试着跟踪。我试图让登录按钮变成绿色，但它似乎没有继承任何主题样式与给定的代码。不知道我做错了什么。
我有以下代码：
import React from "react";
import {
createMuiTheme,
withStyles,
makeStyles
} from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import green from "@materi
浏览 0提问于2019-06-05得票数 2
我正在开发一个菜单项，代码如下所示。单击菜单项时，我试图更改它的样式。我应用了一个函数clickHandler在选定的状态和非选定的状态之间切换。基于menuItem的状态，我想改变它的风格。在当前的场景中，如果我单击了任何ListItem，更改的样式将应用于所有的ListItems，而不是一个。我怎样才能做到这一点？
import React, {Fragment, useCallback, useState} from 'react';
import {makeStyles, withStyles} from '@material-ui/core/styles
浏览 2提问于2020-08-15得票数 2
回答已采纳
我想转换这个Functional Component
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar
浏览 1提问于2019-11-05得票数 0
回答已采纳
6回答
我正在使用React Material UI (文档)中的responsive抽屉
我正在试着改变它，使抽屉的高度始终保持为100%。为此，我尝试更改根类的高度，当前设置为430。但是，当我将其设置为百分比时，它只会默认为可能的最小高度。
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
浏览 4提问于2017-11-28得票数 7
在带有按钮material-ui / core '：v3.9.1裁剪backgroundImage的应用程序栏中。 ? 在带有按钮的应用程序栏material-ui / core '：v3.0.3一切正常 ? 为什么？在v3.0.3中可以抓取什么来工作。我的代码： //https://material-ui.com/api/app-bar/ (带按钮的应用程序栏) import React from "react";
import PropTypes from "prop-types";
import { w
浏览 21提问于2019-01-29得票数 1
我正在为桌面构建web应用程序，我发现material-ui在显示组件时浪费了很多空间。
AppBar以填充24呈现。将样式传递给appbar只是添加24，而不是覆盖。
只需比较stackoverflow和material-ui appbar的菜单栏高度，如何将AppBar高度降低至少10px？
浏览 1提问于2018-04-24得票数 2
3回答
我发现很难在Material UI上创建带有菜单的导航栏。我读过它的AppBar文档。但是，他们似乎没有提供这个功能。
1)物料UI AppBar
2) React Bootstrap导航条
如何像React Bootstrap那样在Material UI上创建导航栏菜单？
浏览 2提问于2017-09-05得票数 12
在许多npm模块中，我最近安装了(例如。@material/core)有三种方法可以导入相同的React组件：
import { AppBar } from '@material-ui/core'
import AppBar from '@material-ui/core/AppBar/AppBar'
import AppBar from '@material-ui/core/es/AppBar/AppBar'
在哪种情况下，我应该使用变体3/ es6导出的文件？
如果tree-shaking / dead code eliminatio
浏览 0提问于2018-10-18得票数 1
当我单击左侧的AppBar元素图标时，_handleClick()方法应该执行。我不能收到控制台信息。我使用material框架，属性onLeftIconButtonTouchTap是为回调函数提供的，用于通过触摸点击选择左侧图标。
import React, { Component } from 'react'
import { AppBar, IconButton } from 'material-ui'
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert&
浏览 1提问于2015-12-11得票数 2
回答已采纳
如何在react应用程序中激活侧边菜单。我使用ListItem在我的应用程序中显示侧边菜单。但在侧边菜单中，当我单击ListItem时，它将重定向到新页面。那么如何选择或激活侧边菜单呢？我尝试使用状态激活，但是页面被重定向到另一个页面。所以状态将不起作用。
//import React from "react";
import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import classNames from "cl
浏览 0提问于2019-05-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
