![](/img/trans.png)
[英]Material-UI: How to bring the Drawer component below the AppBar
[英]How do you add multiple elements to Material-UI's AppBar component?
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} />
);
}
我遇到了同樣的問題,並使用AppBar孩子解決了它。 您可能需要修復按鈕的樣式,使它們看起來與原始樣式相同
render() {
var buttonStyle = {
backgroundColor: 'transparent',
color: 'white'
};
return (
<AppBar title="React seed">
<FlatButton label="About" style={buttonStyle} />
<FlatButton label="Home" style={buttonStyle} />
</AppBar>
)}
您應該使用material-ui/AppBar/AppBar
getStyles
並將樣式傳遞給子組件( FlatButton
, IconMenu
,...)。 為了使用getStyles
,您需要在contextTypes
聲明的上下文中獲取muiTheme
。
注意:如果要同時使用FlatButton和IconMenu,則需要調整FlatButton頂部位置,因為FlatButton和IconMenu之間存在大小差異。 ( hasIconMenu == true
pattern)
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>
);
}
你應該做這個
render() {
const buttonStyle = {
backgroundColor: 'transparent',
color: 'white'
};
return (
<AppBar title="React seed" iconRightElement={
<FlatButton label="About" style={buttonStyle} />
<FlatButton label="Home" style={buttonStyle} />
} />
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.