How do you add multiple elements to Material-UI's AppBar component?

The iconRightElement must be a single element, so you just need to wrap your buttons in a div like this:

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} />  );}

I run into the same issue, and solved it using AppBar children. You might need to fix the styling of the buttons to make them look identical to the original ones

render() {  var buttonStyle = {    backgroundColor: 'transparent',    color: 'white'  };  return (    <AppBar title="React seed">      <FlatButton label="About" style={buttonStyle} />      <FlatButton label="Home" style={buttonStyle} />    </AppBar>  )}

You should use getStyles of material-ui/AppBar/AppBar and pass the style to child component (FlatButton, IconMenu, ...).In order to use getStyles, you need to get muiTheme in context with declaration of contextTypes.

NOTE: If you want to use both FlatButton and IconMenu, you need to adjust FlatButton top position because of size deference between FlatButton and 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>    );  }