我希望在Material-UI AppBar中有多个FlatButton组件,并保留样式,所以它看起来像这样(有多个按钮)。
但是,当我尝试添加多个FlatButton组件时,我收到一个错误,提示我需要将它们封装在一个封闭标记中。我同时使用了span和div,结果都很糟糕。
有没有一种方法可以在封闭标记中保留AppBar的样式,或者有一种不同的方法来向AppBar本身添加多个元素以获得所需的效果?
发布于 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} />
);
}
发布于 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>
)}
发布于 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>
);
}
https://stackoverflow.com/questions/31979596
复制相似问题