在Material-UI中，AppBar、工具栏的高度是多少？
在Material-UI中，AppBar和工具栏的高度是64像素。AppBar是一个顶部导航栏组件，通常用于显示应用程序的标题和导航菜单。工具栏是AppBar的子组件，用于放置其他元素，如图标、按钮或搜索框。AppBar和工具栏的固定高度为64像素，可以通过自定义样式来修改高度。腾讯云没有直接相关的产品和产品介绍链接地址。
相关·内容
我使用material-ui。有两个工具栏希望第二个工具栏具有透明背景 我遵循了这一点，但它适用于AppBar组件，而不适用于Transparent AppBar in material-ui (React) 我的代码： 主题Fie： const MuiTheme = createMuiTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
},
mixins: {
toolbar: {
b
浏览 18提问于2021-02-02得票数 0
回答已采纳
在带有按钮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
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
我正在尝试使用我的自定义颜色的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
物料界面编码
我正在使用React Material ui。尝试使用Material UI的ToolBar和AppBar组件。但是当我使用这个的时候，我得到了下面的error.Module not found:无法解析'material-ui/core/Toolbar‘
我做了一些研究，删除了软件包并重新安装了它们。但是，我仍然得到相同的错误，我尝试使用这两种导入方法导入
不知道为什么这个问题，我使用的@material-ui/ happens.Is版本有任何问题吗？
从“React”导入react
从‘@material-ui/ AppBar /AppBar’导入核心；
从‘mat
浏览 21提问于2020-05-23得票数 0
2回答
我在中是新的，我正在尝试部署AppBar，但我不知道如何将childs包含到这个NavBar中。当我单击三行菜单时，我希望部署AppBar。我的.jsx是：
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
im
浏览 1提问于2017-04-22得票数 2
回答已采纳
我正尝试在material-ui中的Appbar中添加一个垂直分割器组件。我遇到了与这里相同的问题，但是发布的解决方案不适用于我的情况：Adding vertical divider to material-ui AppBar component 请看下面的代码： <AppBar position="static" color="default">
<Toolbar>
<Typography type="title" color="inherit">
Title
浏览 21提问于2020-08-26得票数 0
我试图在CollapsingToolbarLayout中包含工具栏下的布局。第一个草稿没有linearlayout，但是这样做是工具栏重叠了所包含的布局。所以我把工具栏和布局放到一个linearlayout中。布局按计划在工具栏下面，但滚动行为现在消失了。他们只是呆在同一个地方不滚动。
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
and
浏览 3提问于2022-06-11得票数 0
回答已采纳
我正在建立一个小的网络应用程序使用的反应和材料-UI，我不知道如何使我的抽屉组件适合我的应用程序栏。使用工具，我可以在控制台中看到，我的组件正在获取classNames，但是不管我做了什么，我的样式都不会应用到它们上。目前，抽屉正在剪裁屏幕顶部的应用程序栏，占据整个页面的高度，而不是安装在应用程序栏下面。为了使我的“侧栏”组件适合于我的"Navbar“组件，我需要更改什么？我之所以将这两个组件创建为单独的组件，原因之一是我计划稍后向它们添加更多的功能。谢谢。
我一直在上跟踪“应用程序栏下的剪裁”组件演示，我还引用了
下面是我的代码片段
我的主应用程序
import React from
浏览 0提问于2019-06-03得票数 2
回答已采纳
对于全息设计，推荐的动作杆高度为40 to在景观期间，根据杰克沃顿：。
我在想，对于材料设计，推荐的工具栏高度是多少？
我在Google设计指南中找不到任何信息：
我之所以这么问，是因为我在景观模式中得到了一个令人不快的外观。建议的解决方案是扩大文本大小：
我只是想知道，不是扩大文本大小，我应该只是使工具栏的高度更小，在景观模式？我倾向于看GMail应用程序。
肖像
景观
似乎期望在景观中有更小的文本大小和更小的工具栏高度。所以，美化工具栏的确切高度是多少？
浏览 3提问于2015-06-17得票数 18
回答已采纳
我试图更好地理解Material-UI是如何工作的，我很困惑为什么我需要使用两次工具栏组件才能像在this example code中那样正确地呈现滚动工具栏。 如果我在ElevationScroll之后没有包含第二个工具栏，我想放在应用程序栏下面的菜单就会呈现在应用程序栏下面。如果我把它包含进去，我的菜单就会被下推，并且呈现得很好。这很好用，但是我不明白为什么我需要在我的jsx中包括一个额外的东西来让事情看起来正确，就像这个简化的例子： function SettingsMenu() {
return (
<ElevationScroll>
<Ap
浏览 17提问于2019-06-04得票数 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
回答已采纳
所以我正在做一个react应用程序，我认为给你看代码比解释更好： Body.js： import React from 'react';
import Clearsky from "Images/clearsky.jpg";
import Rain from "Images/clearsky.jpg";
import Cloudy from "Images/clearsky.jpg";
const type = {
CLEARSKY: "clearsky",
RAIN: "rain&#
浏览 30提问于2020-04-04得票数 1
回答已采纳
在许多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
1回答
我正在尝试为mac应用程序创建矩形金属工具栏图标，就像在Safari中看到的那样，但似乎找不到任何关于像素大小的信息。
人机接口指南建议金属工具栏按钮不应超过19x19，但没有指定如果用户在自定义工具栏时选择“使用小尺寸”，则图标的大小应该是多少。
浏览 0提问于2009-12-11得票数 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
回答已采纳
1回答
刚安装的电子与材料界面反应。在我的app-bar组件im使用颜色属性，但当加载一种颜色，它删除所有的颜色，并使其白色。我从文档中复制了它，所以不知道我遗漏了什么，我的代码如下。
第一次进口颜色
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@materia
浏览 2提问于2018-06-01得票数 0
回答已采纳
在官方的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
我第一次尝试在React项目中使用Material-UI。我已经将AppBar to call抽屉放在一起，并且侧边栏中出现了一个菜单项列表。我面临的问题是他们有巨大的页边距-顶部间距。
间隔的示例
Close (X)
About
Contact
我希望这一切都是一个接一个的。
Close (X)
About
Contact
我不确定是什么导致了额外的间距。我组装了一个与我现在使用的设计类似的模型，间距是正常的。我已经在下面包含了完整的组件。
代码
import React, { Component } from 'react'
import
浏览 7提问于2017-03-14得票数 1
回答已采纳
我有一个AppBar组件，我想把它和一个抽屉结合起来，这是AppBar代码：
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from &#
浏览 3提问于2018-02-14得票数 4
回答已采纳
7回答
我想在我的应用程序中创建一个工具栏，我想知道android中工具栏的标准高度是多少？
我希望它足够大，但不能太大。有标准尺寸的吗？
浏览 10提问于2012-10-20得票数 96
回答已采纳
我在一个meteor应用中使用了 react material-ui依赖。我想知道怎样才能改变我正在使用的AppBar的颜色和高度。通过对使用内联样式，这是可能的吗？如果是这样的话，是怎么做的？
injectTapEventPlugin();
var {AppBar} = MUI;
var {ThemeManager, LightRawTheme} = Styles;
Header = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.object
},
getChi
浏览 5提问于2015-11-20得票数 1
2回答
我在更改<AppBar>背景颜色时遇到问题。我使用Container组件来设置最大屏幕大小。 当屏幕尺寸大于最大屏幕尺寸时，这会导致问题。AppBar的背景颜色是预期的，其余的是白色。 如何删除白色并使其与<AppBar>背景色匹配？ ? 如何才能使白色与<AppBar>颜色相匹配，从而使导航看起来一致？ 这就是我到目前为止所知道的： import React from 'react';
import {CssBaseline, Container} from '@material-ui/core/';
import
浏览 20提问于2020-03-25得票数 0
如何在滚动时自动隐藏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
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
根据标题，当使用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
回答已采纳
我刚开始使用meteor/flow-router/react-mounter，在Material-ui中设置组件的主题时遇到了一个问题。
在Material-UI v0.15.0中，他们不再将默认设置为lightBaseTheme，因此必须在创建时设置。
这是一个示例组件。
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclos
浏览 4提问于2016-04-22得票数 0
我有以下不能编译的代码：
import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {cyan, red} from 'material-ui/colors';
import { red40
浏览 1提问于2018-04-10得票数 12
回答已采纳
我正在将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
1回答
我试图在无状态组件中调用函数ButtonAppBar，但是TS编译器给出了这个错误：'{' expected。我不确定是否应该将它传递给我的New Header组件，或者是否应该给它一个类型。
这是我的组件
import * as React from "react";
import { withStyles, createStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar f
浏览 6提问于2018-11-30得票数 0
因此，最流行的笔记本分辨率是1366x768。
视口高度(浏览器中网站可用的高度)取决于操作系统和浏览器。例如，Windows 7的任务栏比Windows上的任务栏要大.此外，IE6的“标头”比Chrome的“标头”大。
在最坏的情况下，可用的视口高度是多少？(在1366x768上最大化浏览器窗口)？
( Chrome @ Win7是667‘s。)
更新:我知道我应该提到那些工具栏:)。让我澄清一下:在现实生活中，用户要么根本没有额外的工具栏，要么他们最多有一个或两个额外的工具栏。
稍后我会计算出那些工具栏。对于这个问题，我想知道最坏的情况，浏览器中没有额外的工具栏。
浏览 0提问于2011-06-02得票数 1
我正在寻找设置SPA页面布局的最佳方法，SPA由顶部的静态标题(AppBar)和标题下面的动态页面内容组成。页面内容ScreenSizePage有时(但并非总是)的高度应该与屏幕的剩余高度完全匹配。换句话说:怎样才能使div在ScreenSizePage中的高度完全符合素材UI应用程序中剩余的屏幕高度？
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline&
浏览 1提问于2019-10-16得票数 3
回答已采纳
我用的是流类型。
我在一些$Export libdefs中遇到了变量。我不知道它是什么，也不知道它被记录在哪里。
对我来说，这似乎类似于，但这里没有描述$Export的问题。有人能解释一下它的来源吗？
declare module "@material-ui/core/AppBar/AppBar" {
import type {ComponentType, Node} from "react";
declare type Color = "inherit" | "primary" | "secondary"
浏览 1提问于2019-04-02得票数 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
回答已采纳
我从这个模板()获取这条侧导航条。其代码如下-
import React, { PropTypes } from 'react';
import { Link } from 'react-router-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton
浏览 8提问于2017-12-28得票数 2
我在试着跟踪。我试图让登录按钮变成绿色，但它似乎没有继承任何主题样式与给定的代码。不知道我做错了什么。
我有以下代码：
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
2回答
具有阴影效果的滚动上的透明工具栏
、、、、
我试图获得类似于google消息应用程序中工具栏的效果。
基本上，工具栏有一个纯色，当用户滚动时，它变成了透明，底部有阴影。
我设法得到了阴影效果，但我无法获得透明的效果。
这就是我想要达到的目标：
这就是我能得到的：
这是我的带有工具栏的XML AppBarLayout：
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_
浏览 5提问于2020-03-12得票数 3
回答已采纳
我正在尝试制作一个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
我有一个反应应用程序，我总是希望内容至少100%的高度，以颜色的背景相应。我已经尝试实现了以下CSS 100%的高度，在最高层，这是可行的。问题是，当root的内容超过100%时，当内容超过页面结束时，滚动条就不会出现。任何想法，我如何使垂直滚动条出现时，有100%的高度。
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
html {
height: 100%;
}
#root {
height: 100%;
}
指数
<html>
<body>
浏览 5提问于2017-11-29得票数 2
我需要启动一个我在父按钮的子组件中的函数，但我还没有得到它，有人知道一些表单，我已经看到了一些示例，但我找不到可以帮助我的东西，因为它们只处理属性更改
这是我的代码父代码：
import React from 'react';
import ReactDom from 'react-dom';
import AppBar from 'material-ui/AppBar';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvi
浏览 4提问于2017-04-27得票数 10
回答已采纳
2回答
我在material-ui，nextjs和typescript中有一个项目。我正在尝试让我的导航栏与nextjs一起工作： import * as React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Link from "next/link";
import {Tab, Tabs} from "@material-ui/core";
export default function NavBar() {
return (
浏览 13提问于2020-12-28得票数 5
回答已采纳
我已经在我的App.js中创建了一个主题，它覆盖了原色和次色。我让ThemeProvider包装了一个Home零部件。被替代的值不会显示在Home构件中。我做错了什么？ App.js import React from 'react'
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import purple from '@material-ui/core/colors/purple'
import green from '@materi
浏览 17提问于2020-07-04得票数 3
回答已采纳
我正在开发一个菜单项，代码如下所示。单击菜单项时，我试图更改它的样式。我应用了一个函数clickHandler在选定的状态和非选定的状态之间切换。基于menuItem的状态，我想改变它的风格。在当前的场景中，如果我单击了任何ListItem，更改的样式将应用于所有的ListItems，而不是一个。我怎样才能做到这一点？
import React, {Fragment, useCallback, useState} from 'react';
import {makeStyles, withStyles} from '@material-ui/core/styles
浏览 2提问于2020-08-15得票数 2
回答已采纳
4回答
在组件中，我希望存储中的变量等于一个函数才能使用它。
我这样创建我的函数：
makeStyles(theme => ({
root: {
flexGrow: 1
},
title: {
flexGrow: 1
}
}));
它是material-ui中的一个函数。
我在我的商店里得到了这样的值：
this.state = {
classes: makeStyles()
};
所以我希望我可以像这样使用它：this.state.classes.root但我不工作(它编译但不工作)
这是我的代码：
import React, { Component } f
浏览 1提问于2019-07-02得票数 1
我试图在一个材料-UI AppBar/工具栏中垂直对多个项/行进行居中，但它似乎不起作用
这就是我拥有的..。
这就是我想要的..。
这是我的密码..。
const useStyles = makeStyles(theme => ({
appBar: {
height: 200,
width: `calc(100% - 200px)`,
marginLeft: 200
},
link: {
display: "flex",
color: "white"
},
icon: {
浏览 4提问于2020-08-04得票数 1
回答已采纳
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
回答已采纳
我正在为桌面构建web应用程序，我发现material-ui在显示组件时浪费了很多空间。
AppBar以填充24呈现。将样式传递给appbar只是添加24，而不是覆盖。
只需比较stackoverflow和material-ui appbar的菜单栏高度，如何将AppBar高度降低至少10px？
浏览 1提问于2018-04-24得票数 2
1回答
我有这个Appbar组件，它在宽屏幕上呈现得很好，如下所示：
但在较小的屏幕上，按钮像下面这样挤在一起：
即使是尝试响应typography，也没有解决我的问题。
因此，我想我需要为小屏幕实现一个抽屉。。
那在代码中会是什么样子？
下面是AppBar的代码：
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import
浏览 1提问于2020-01-15得票数 1
这是我第一次与React交互，代码如下：
header.jsx
import React 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';
import FlatButton fr
浏览 2提问于2017-05-27得票数 1
回答已采纳
2回答
将徽标图像放入导航栏
、、、
当我把我的徽标放在导航栏里面的时候，我得到了一个破碎的图像。我将它保存在本地的公共文件夹中。 我试着作为一个道具传递，并直接链接到路径，但我似乎无法让它工作。 import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
const NavBar = () => {
return(
<div
浏览 8提问于2019-06-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
