Reactjs React主题未应用于子组件

这是我第一次与React交互，代码如下：

header.jsx

import React 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 MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            logged: false
        };
    }

    render() {
        return (
            <AppBar title="Some title"
                iconElementLeft={<IconButton><NavigationClose /></IconButton>}
                iconElementRight={this.state.logged ? <Logged /> : <Login />} />
        );
    }
}

class Login extends React.Component {
    render() {
        return (
            <FlatButton label="Login" />
        );
    }
}

class Logged extends React.Component {
    render() {
        return (
            <IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
                <MenuItem primaryText="Item1" />
                <MenuItem primaryText="Item2" />
                <MenuItem primaryText="Item2" />
            </IconMenu>
        );
    }
}

export default Header;


index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';

import Header from './header.jsx';

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

class App extends React.Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <div>
          <Header />
          <p> Hello React!</p>
        </div>
      </MuiThemeProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

header.jsx
从“React”导入React；
从“物料ui/AppBar”导入AppBar；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/IconMenu”导入IconMenu；
从“物料界面/菜单项”导入菜单项；
从“物料界面/平面按钮”导入平面按钮；
从“材料ui/svg图标/导航/更多垂直”导入MoreVertIcon；
从“材质ui/svg图标/navigation/close”导入NavigationClose；
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
记录：错误
};
}
render（）{
返回(

但是，如果我通过直接在AppBar组件中添加来自组件的代码来更改Header组件，如下所示：

<AppBar title="Some title"
                iconElementLeft={<IconButton><NavigationClose /></IconButton>}
                iconElementRight={this.state.logged ? <Logged /> : <FlatButton label="Login" />} />

AppBar内部实现检查提供给
IConelEntright
属性的元素的类型。仅当显式匹配类型与某些预定义值时，才会“自动”提供主题，例如FlatButton

以下是其内部工作原理（摘自material ui/AppBar源代码）：

如您所见，如果您提供一些自定义组件，则需要应用样式以手动匹配主题，例如与上下文匹配：

class Login extends React.Component {
  render() {
    return(
      <FlatButton style={{
        color: this.context.muiTheme.appBar.textColor
      }}/>
    )
  }
}

Login.contextTypes = {
  muiTheme: React.PropTypes.object.isRequired,
};

类登录扩展了React.Component{
render（）{
返回(
)
}
}
Login.contextTypes={
muiTheme:React.PropTypes.object.isRequired，
};
AppBar内部实现检查提供给
IConelEntright
属性的元素的类型。主题将“自动”提供，只是在显式匹配某些预定义值的情况下，例如FlatButton

以下是其内部工作原理（摘自material ui/AppBar源代码）：

如您所见，如果您提供一些自定义组件，则需要应用样式以手动匹配主题，例如与上下文匹配：

class Login extends React.Component {
  render() {
    return(
      <FlatButton style={{
        color: this.context.muiTheme.appBar.textColor
      }}/>
    )
  }
}

Login.contextTypes = {
  muiTheme: React.PropTypes.object.isRequired,
};

类登录扩展了React.Component{
render（）{
返回(
)
}
}
Login.contextTypes={
muiTheme:React.PropTypes.object.isRequired，
};