如何向 Material-UI 的 AppBar 组件添加多个元素?
Posted
技术标签:
【中文标题】如何向 Material-UI 的 AppBar 组件添加多个元素?【英文标题】:How do you add multiple elements to Material-UI's AppBar component? 【发布时间】:2015-11-05 21:52:27 【问题描述】:我想在 Material-UI AppBar 中有多个 FlatButton 组件并保留样式,所以它看起来像这样(带有多个按钮)。
但是,当我尝试添加多个 FlatButton 组件时,我收到一条错误消息,提示我需要将它们包装在封闭标记中。我同时使用了 span 和 div,结果同样糟糕。
有没有办法在封闭标记中保留 AppBar 的样式,或者以不同的方式向 AppBar 本身添加多个元素以获得所需的效果?
【问题讨论】:
【参考方案1】:我遇到了同样的问题,并使用 AppBar 子级解决了它。您可能需要修复按钮的样式以使其看起来与原始按钮相同
render()
var buttonStyle =
backgroundColor: 'transparent',
color: 'white'
;
return (
<AppBar title="React seed">
<FlatButton label="About" style=buttonStyle />
<FlatButton label="Home" style=buttonStyle />
</AppBar>
)
【讨论】:
如果您这样做,您的组件将不会垂直居中。您可以将 flatbuttons 添加到 iconRightElement 道具 我相信那是 iconElementRight:material-ui.com/#/components/app-bar【参考方案2】:你应该这样做
render()
const buttonStyle =
backgroundColor: 'transparent',
color: 'white'
;
return (
<AppBar title="React seed" iconRightElement=
<FlatButton label="About" style=buttonStyle />
<FlatButton label="Home" style=buttonStyle />
/>
)
【讨论】:
这不起作用,抛出一个解析错误并且AppBar
参数应该是iconElementRight
【参考方案3】:
iconRightElement 必须是单个元素,因此您只需将按钮包装在一个 div 中,如下所示:
render()
const buttonStyle =
backgroundColor: 'transparent',
color: 'white'
;
const rightButtons = (
<div>
<FlatButton label="About" style=buttonStyle />
<FlatButton label="Home" style=buttonStyle />
</div>
);
return (
<AppBar title="React seed" iconRightElement=rightButtons />
);
【讨论】:
我觉得现在应该是iconElementRight
。【参考方案4】:
您应该使用material-ui/AppBar/AppBar
的getStyles
并将样式传递给子组件(FlatButton
,IconMenu
,...)。
为了使用getStyles
,您需要在声明contextTypes
的上下文中获取muiTheme
。
注意:如果您想同时使用 FlatButton 和 IconMenu,您需要调整 FlatButton 顶部位置,因为 FlatButton 和 IconMenu 之间的大小不同。 (hasIconMenu == true
模式)
import React from 'react';
import AppBar from 'material-ui/AppBar';
import getStyles from 'material-ui/AppBar/AppBar';
import MenuItem from 'material-ui/MenuItem';
class App extends React.Component
static get contextTypes()
return muiTheme: React.PropTypes.object.isRequired ;
render()
const styles = getStyles(this.props, this.context);
const button: iconButtonSize = this.context.muiTheme;
const appBar = this.context.muiTheme;
const hasIconMenu = false;
let iconMenu = null;
if (hasIconMenu)
styles.flatButton.top = -styles.flatButton.marginTop;
styles.flatButton.marginTop = 0;
iconMenu = (
<IconMenu
iconStyle=styles.iconButtonIconStyle
iconButtonElement=<IconButton><MoreVertIcon /></IconButton>
targetOrigin=horizontal: 'right', vertical: 'top'
anchorOrigin=horizontal: 'right', vertical: 'top'
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
);
const rightIcons = (
<div>
<FlatButton label="My Channels" style=styles.flatButton />
<FlatButton label="Favorite" style=styles.flatButton />
<FlatButton label="Login" style=styles.flatButton />
iconMenu
</div>
);
return (
<div>
<AppBar
title="Title"
iconElementRight=rightIcons
/>
this.props.children
</div>
);
【讨论】:
以上是关于如何向 Material-UI 的 AppBar 组件添加多个元素?的主要内容,如果未能解决你的问题,请参考以下文章
如何更改 Material-UI AppBar 的明暗主题颜色?
添加带有材质表的组件更改 Material-UI AppBar 样式