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

Question

I want to have multiple FlatButton components in the Material-UI AppBar and preserve the style, so it looks like this (with multiple buttons).

However, when I try to add multiple FlatButton components, I get an error saying I need to wrap them in an enclosing tag. I've used both a span and a div with the same bad results.

Is there a way to either preserve the AppBar's style in the enclosing tag or a different way to add multiple elements to the AppBar itself to get the desired effect?

Solution 1

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

Solution 2

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

Solution 3

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