Material Ui (reactjs) -在appBar中居中显示徽标图像
Material-UI是一个基于React的开源UI组件库，它提供了丰富的可重用组件和样式，帮助开发者快速构建美观、响应式的Web应用程序。
在AppBar中居中显示徽标图像，可以通过以下步骤实现：
- 导入所需的组件和样式：
import React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';- 创建一个样式对象，用于定制AppBar的样式：
const useStyles = makeStyles((theme) => ({
appBar: {
display: 'flex',
justifyContent: 'center',
},
logo: {
width: 100, // 根据实际需求调整徽标图像的大小
},
}));- 在函数组件中使用AppBar，并应用自定义样式：
const MyComponent = () => {
const classes = useStyles();
return (
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<img src="/path/to/logo.png" alt="Logo" className={classes.logo} />
</Toolbar>
</AppBar>
);
};在上述代码中，我们使用了AppBar、Toolbar和Typography组件来创建一个基本的AppBar结构。通过设置AppBar的position属性为"static"，使其固定在页面顶部。使用className属性将自定义样式应用于AppBar组件，其中display: 'flex'和justifyContent: 'center'将徽标图像居中显示。在Toolbar中使用img标签来显示徽标图像，通过设置src属性指定图像的路径，alt属性提供图像的替代文本。通过className属性将自定义样式应用于徽标图像，可以根据实际需求调整图像的大小。
Material-UI还提供了许多其他组件和样式，可以根据具体需求进行定制和使用。更多关于Material-UI的信息和文档可以在腾讯云的产品介绍页面中找到：Material-UI - 腾讯云
相关·内容
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
我试图使用一些按钮和一个自定义下拉菜单组件的材料ui制作一个简单的导航条。当我尝试使用makeStyle钩子对其进行样式设置时，样式只适用于资料ui的按钮和标题，而不适用于自定义下拉组件。
import React, { useContext } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { AppBar, Toolbar, Typography } from "@material-ui/core";
import DropDown fr
浏览 0提问于2020-06-11得票数 0
回答已采纳
我想转换这个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
回答已采纳
根据标题，当使用React实现Material时，我将得到以下错误消息。
React "useStyles“在函数"appBar”中被调用，它既不是function函数组件，也不是自定义React函数。
我已经复习了钩子的规则()，我不知道我错过了什么。如能提供任何援助，将不胜感激。
这是我的源代码：
import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar fro
浏览 4提问于2020-03-22得票数 2
回答已采纳
我正在使用makeStyles和useClasses创建类。但在大多数情况下，MUI CSS会被应用，而我的类只能通过使用'!important‘来应用。有没有一种方法可以重写MUI样式而不使用“！important”。在使用important时，一些MUI CSS在默认情况下会失败。同样来自相同代码的徽标甚至不需要使用!important就可以正常工作。
import React, { useState, useEffect } from "react";
import AppBar from "@mui/material/AppBar";
impor
浏览 3提问于2021-11-29得票数 1
在material UI中，如何在字体中居中显示文本。我正尝试在react中创建一个导航栏，并使用material UI进行样式设置，我想在其中居中显示文本hello world。我已经尝试了内联样式和自定义主题，但没有一个对我有效。有没有人能帮我理解我的代码缺失之处。 import React, { Fragment } from 'react';
import {
AppBar,
Toolbar,
Typography,
Button,
Box,
Avatar,
Link,
} from '@material-ui/core'
浏览 67提问于2020-08-11得票数 0
我刚接触React和Material UI，我一直在努力尝试将我现在拥有的Mini Variant抽屉与响应式抽屉连接起来，所以当你在手机上使用它时，它会变成响应式抽屉。如果有人能帮助我，这对我来说意义重大，我试过了，但我总是失败。这也将帮助我获得与抽屉进一步联系的知识。
下面是我在Mini Variant that中使用的代码：
import React, {useState} from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/sty
浏览 19提问于2021-09-06得票数 0
我正在将Material (v4.4.3)集成到React (v16.9.2) TypeScript (v3.6.3)网站中。使用示例AppBar组件示例和TypeScript指南，我有以下功能组件。
但是，我在这一行中得到了useStyles()的TS错误
const classes = useStyles();
(TS)：期望一个参数，但得到0。
import * as React from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
浏览 9提问于2019-09-24得票数 3
这是我的theme.ts文件，我在其中创建了Muitheme和fontfamily
import 'typeface-inconsolata'
import 'typeface-quicksand'
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core'
import indigo from '@material-ui/core/colors/indigo'
import yellow from '@material-ui/core/
浏览 0提问于2019-11-28得票数 0
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
回答已采纳
当导航栏打开时，我想让抽屉消失在导航栏后面。目前，抽屉覆盖在导航栏上。我试图在我的“样式”中使用z-index来改变它，但显然它不起作用(见截图)。我将导航栏的z索引设置为高于抽屉的z索引。
你能找出我的错误吗？
下面是drawer.js：
import React from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/c
浏览 1提问于2020-08-24得票数 0
1回答
我试图定制由Material提供的默认主题，但是样式不适用。请帮帮忙。
在中，当我试图自定义样式时，Header.js文件将不会被应用。
const useStyles = makeStyles((theme) => ({
toolbarMargin: {
...theme.mixins.toolbar,
marginBottom: '3em',
},
logo: {
height: '7em',
},
tabContainer: {
marginLeft: 'auto',
},
浏览 2提问于2021-02-08得票数 0
回答已采纳
1回答
我试图在reason中调整图像的大小，但由于某种原因，通过useStyles更改标记的高度和宽度并不会使图像变小，而只是在页面中将其移动。
代码：
import { makeStyles } from "@material-ui/core/styles";
import { SvgIcon, Typography } from "@mui/material";
import { Icon } from "@mui/material";
const useStyles = makeStyles((theme) => ({
pageCon
浏览 9提问于2022-03-12得票数 0
2回答
我正在尝试将CloseIcon与flex-end对齐，这样它就能正确地浮动，但无法找到应用该样式的位置。
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List
浏览 5提问于2020-07-13得票数 1
回答已采纳
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
2回答
我想改变我的MUI抽屉的背景色。以下是我的头代码：
import { AppBar, Toolbar, Typography, makeStyles, Button, IconButton, Drawer, Link, MenuItem } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import MenuIcon from &
浏览 5提问于2022-02-02得票数 1
我正在开发一个菜单项，代码如下所示。单击菜单项时，我试图更改它的样式。我应用了一个函数clickHandler在选定的状态和非选定的状态之间切换。基于menuItem的状态，我想改变它的风格。在当前的场景中，如果我单击了任何ListItem，更改的样式将应用于所有的ListItems，而不是一个。我怎样才能做到这一点？
import React, {Fragment, useCallback, useState} from 'react';
import {makeStyles, withStyles} from '@material-ui/core/styles
浏览 2提问于2020-08-15得票数 2
回答已采纳
1回答
我一直在将类组件转换为函数，但由于导出默认值，我被困在这个钩子错误上。我肯定事情很简单，但我找不到我想要的答案。
这是导致错误的代码：
import React from 'react'
import {AppBar, Toolbar, Button, Typography, makeStyles} from '@material-ui/core'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Me
浏览 1提问于2020-09-30得票数 0
回答已采纳
1回答
如何在物料界面设置下拉菜单位置
、、、、
我正在构建一个Gatsby应用程序，我想一旦菜单图标被点击，我的菜单将下拉下拉的权利和宽度为100%。下面是我的代码： 我试图通过在组件中设置它来解决这个问题，但是组件根本没有改变： getContentAnchorEl={null}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOri
浏览 19提问于2020-07-15得票数 1
简单的反应-管理应用。试图显示一个徽标。我有应用程序的标题和一个标志的占位符显示，但没有图片。同时尝试了.svg和.png。看上去是这样的：
下面是定制的AppBar组件：
const CustomAppBar = props => {
const classes = useStyles();
return (
<AppBar {...props} color='secondary' >
<Toolbar>
{/* <img src="./images/g3tools_orange
浏览 5提问于2020-04-23得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
