What is the muiName property and when do I have to set it for Material-UI components?

Question

In the offical material-ui documentation an example for the AppBar component here looks like this:

import React, {Component} from \'react\';
import A         


        

Answer 1

The example in the documentation helped me a lot.

Right now with the v4.8.1, you can add the muiName as follow:

const WrappedIcon = props => <Icon {...props} />;
WrappedIcon.muiName = Icon.muiName;

Answer 2

Answer in documentation is:

In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of our components when needed with a muiName static property.

Let's check this example: // @flow weak

import React from 'react';
import IconButton from 'material-ui/IconButton';
import Icon from 'material-ui/Icon';

const WrappedIcon = props => <Icon {...props} />;
WrappedIcon.muiName = 'Icon';

export default function Composition() {
  return (
    <div>
      <IconButton>
        <Icon>alarm</Icon>
      </IconButton>
      <IconButton>
        <WrappedIcon>alarm</WrappedIcon>
      </IconButton>
    </div>
  );
}

If you wrapped material-ui component you should set 'muiName' property to wrapper component with value as name of material-ui component you wrapped. I hope you understand this phrase :)