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?

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