```
const Login = () => (
  <FlatButton label="Login" />
);

export class App extends Component {
  render() {
    return (
      <div className="container">
        <MuiThemeProvider>
          <AppBar
            iconElementRight={<Login />}
          />
        </MuiThemeProvider>
      </div>
    );
  }
}

```

The results is a button with broken styling.

Here is an image: [http://i.imgur.com/1IHboDq.png](https://i.imgur.com/1IHboDq.png)

However, inserting the component directly works perfectly fine.
Like this:

```
      <AppBar
        iconElementRight={<FlatButton label="Login" />}
      />

```

[http://i.imgur.com/1kUaVYT.png](https://i.imgur.com/1kUaVYT.png)

Am I doing something wrong or is this a bug?