title: Material-UI: AppBar => FlatButton Text unstyled if not defined directly
body: <p>Okay, what I want to do is this: I want my AppBar to have a FlatButton with the label "Login". This label should change to "Logout" for obvious reasons.</p>
  
  <p>Now, when I define the AppBar like this then I get the proper styling:</p>
  
  <p><a href="https://i.stack.imgur.com/cdfht.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cdfht.png" alt="enter image description here"></a></p>
  
  <p>and the code like this:</p>
  
  <pre><code>let App = React.createClass({
      render(){
          return(
              &lt;div&gt;
                  &lt;AppBar
                      title="Foobar"
                      iconElementRight={&lt;FlatButton&gt;Login&lt;/FlatButton&gt;}
                  /&gt;
                  &lt;div className="LandingPage"&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>However, this does not allow me to change the text. Which is why I pulled the FlatButton out into an extra component like this:</p>
  
  <pre><code>let UserName = React.createClass({
      render(){
          return(
              &lt;FlatButton&gt;Login&lt;/FlatButton&gt;
          )
      }
  });
  
  let App = React.createClass({
      render(){
          return(
              &lt;div&gt;
                  &lt;AppBar
                      title="Foobar"
                      iconElementRight={&lt;UserName /&gt;}
                  /&gt;
                  &lt;div className="LandingPage"&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>What I get as a result is this:</p>
  
  <p><a href="https://i.stack.imgur.com/qpb8C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qpb8C.png" alt="enter image description here"></a></p>
  
  <p>So, what do I have to do differently?</p>