title: What is the muiName property and when do I have to set it for Material-UI components?
body: <p>In the offical material-ui documentation an example for the <code>AppBar</code> component <a href="http://www.material-ui.com/#/components/app-bar" rel="nofollow noreferrer">here</a> looks like this:</p>
  <pre><code>import React, {Component} from 'react';
  import AppBar from 'material-ui/AppBar';
  import IconButton from 'material-ui/IconButton';
  import IconMenu from 'material-ui/IconMenu';
  import MenuItem from 'material-ui/MenuItem';
  import FlatButton from 'material-ui/FlatButton';
  import Toggle from 'material-ui/Toggle';
  import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
  import NavigationClose from 'material-ui/svg-icons/navigation/close';
  
  class Login extends Component {
    static muiName = 'FlatButton';
  
    render() {
      return (
        &lt;FlatButton {...this.props} label=&quot;Login&quot; /&gt;
      );
    }
  }
  
  const Logged = (props) =&gt; (
    &lt;IconMenu
      {...props}
      iconButtonElement={
        &lt;IconButton&gt;&lt;MoreVertIcon /&gt;&lt;/IconButton&gt;
      }
      targetOrigin={{horizontal: 'right', vertical: 'top'}}
      anchorOrigin={{horizontal: 'right', vertical: 'top'}}
    &gt;
      &lt;MenuItem primaryText=&quot;Refresh&quot; /&gt;
      &lt;MenuItem primaryText=&quot;Help&quot; /&gt;
      &lt;MenuItem primaryText=&quot;Sign out&quot; /&gt;
    &lt;/IconMenu&gt;
  );
  
  Logged.muiName = 'IconMenu';
  
  /**
   * This example is taking advantage of the composability of the `AppBar`
   * to render different components depending on the application state.
   */
  class AppBarExampleComposition extends Component {
    state = {
      logged: true,
    };
  
    handleChange = (event, logged) =&gt; {
      this.setState({logged: logged});
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Toggle
            label=&quot;Logged&quot;
            defaultToggled={true}
            onToggle={this.handleChange}
            labelPosition=&quot;right&quot;
            style={{margin: 20}}
          /&gt;
          &lt;AppBar
            title=&quot;Title&quot;
            iconElementLeft={&lt;IconButton&gt;&lt;NavigationClose /&gt;&lt;/IconButton&gt;}
            iconElementRight={this.state.logged ? &lt;Logged /&gt; : &lt;Login /&gt;}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default AppBarExampleComposition;
  </code></pre>
  <p>My questions is about the statements</p>
  <pre><code>static muiName = 'FlatButton';
  </code></pre>
  <p>and</p>
  <pre><code>Logged.muiName = 'IconMenu';
  </code></pre>
  <p>What is <code>muiName</code> and when/why do I have to set it? Should it always be set to the name of the top-level component in the <code>render()</code> method?</p>
  <p>On the same webpage there are examples to <code>AppBar</code> where <code>muiName</code> is not set.</p>