reactjs - Material-UI: AppBar => FlatButton Text が直接定義されていない場合、スタイルが適用されない

Question

さて、私がやりたいことはこれです: AppBar に "Login" というラベルの FlatButton を持たせたいのです。このラベルは、明らかな理由から「ログアウト」に変更する必要があります。

さて、このように AppBar を定義すると、適切なスタイリングが得られます。

そして次のようなコード：

let App = React.createClass({
    render(){
        return(
            <div>
                <AppBar
                    title="Foobar"
                    iconElementRight={<FlatButton>Login</FlatButton>}
                />
                <div className="LandingPage">
                    {this.props.children}
                </div>
            </div>
        );
    }
});

ただし、これではテキストを変更できません。これが、FlatButton を次のような追加のコンポーネントに引き出した理由です。

let UserName = React.createClass({
    render(){
        return(
            <FlatButton>Login</FlatButton>
        )
    }
});

let App = React.createClass({
    render(){
        return(
            <div>
                <AppBar
                    title="Foobar"
                    iconElementRight={<UserName />}
                />
                <div className="LandingPage">
                    {this.props.children}
                </div>
            </div>
        );
    }
});

結果として得られるのはこれです：

それで、私は何を違うようにしなければなりませんか？

Answer 1

material-uiのソース コードに基づいてapp-bar.jsx、渡されたコンポーネントの表示名をチェックし、それに基づいて、必要なスタイルを適用します。このコードは具体的に

// app-bar.jsx

if (iconElementRight) {
  switch (iconElementRight.type.displayName) {
    case 'IconMenu':
    case 'IconButton':
      iconElementRight = React.cloneElement(iconElementRight, {
        iconStyle: this.mergeStyles(styles.iconButton.iconStyle, iconElementRight.props.iconStyle),
      });
      break;

    case 'FlatButton':
      iconElementRight = React.cloneElement(iconElementRight, {
        style: this.mergeStyles(styles.flatButton, iconElementRight.props.style),
      });
      break;
  }

// ...

あなたがしなければならないことは、このようFlatButtonにあなたに追加することですUserName

let UserName = React.createClass({
  displayName: 'FlatButton',
  render() {
    return <FlatButton style={this.props.style} >Login</FlatButton>;
  },
});

そして最後に、this.props.styleに挿入され、スタイルを適用するためにUserNameそれを渡す必要があります。<FlatButton />