Reactjs 材质UI:AppBar=>FlatButton文本未设置样式（如果未直接定义）

好的，我想做的是：我希望我的AppBar有一个带有登录标签的FlatButton。由于明显的原因，此标签应更改为注销

现在，当我像这样定义AppBar时，我得到了正确的样式：

代码如下：

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

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>
        );
    }
});

但是，这不允许我更改文本。这就是为什么我将FlatButton拉出到一个额外的组件中，如下所示：

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

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>
        );
    }
});

结果是：

那么，我有什么不同的做法呢？

基于app-bar.jsx的material ui源代码，它检查传递的组件的显示名称，然后在此基础上应用所需的样式。此代码特别适用于

// 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添加到你的用户名中

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

最后，this.props.style被注入到用户名中，您需要传递它以应用样式。

基于app-bar.jsx的材质ui源代码，它检查传递的组件的显示名称，然后在此基础上应用所需的样式。此代码特别适用于

// 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添加到你的用户名中

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

最后，this.props.style被注入到用户名中，您需要传递它来应用这些样式