如何在Material-UI的AppBar组件中添加多个元素？
如何在Material-UI的AppBar组件中添加多个元素？
提问于 2015-08-13 12:36:15
我希望在Material-UI AppBar中有多个FlatButton组件，并保留样式，所以它看起来像这样(有多个按钮)。
但是，当我尝试添加多个FlatButton组件时，我收到一个错误，提示我需要将它们封装在一个封闭标记中。我同时使用了span和div，结果都很糟糕。
有没有一种方法可以在封闭标记中保留AppBar的样式，或者有一种不同的方法来向AppBar本身添加多个元素以获得所需的效果？
回答 4
Stack Overflow用户
发布于 2016-11-16 22:15:31
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} />
);
}Stack Overflow用户
发布于 2015-09-20 08:42:22
我遇到了同样的问题，并使用AppBar子代解决了它。您可能需要修复按钮的样式，使其看起来与原始按钮相同
render() {
var buttonStyle = {
backgroundColor: 'transparent',
color: 'white'
};
return (
<AppBar title="React seed">
<FlatButton label="About" style={buttonStyle} />
<FlatButton label="Home" style={buttonStyle} />
</AppBar>
)}Stack Overflow用户
发布于 2017-02-16 22:43:49
您应该使用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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31979596
复制相关文章
相似问题