Reagieren Thema nicht auf Kinder Komponenten angewendet

Question

Dies ist meine erste Interaktion mit Reaktion, ist der folgende Code:

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

Das Problem ist, dass das Thema auf die AppBar angewendet wird nur und nicht in seine Komponenten, die sind und das ist, was ich habe:

Allerdings, wenn ich die Header-Komponente ändern, indem Sie den Code aus Komponente direkt in der AppBar Komponente, wie folgt aus:

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

Das Ergebnis ist anders:

Könnten Sie mir bitte sagen, was ich vermisse, damit das Thema an die untergeordneten Komponenten weitergegeben wird und warum funktioniert es im zweiten Szenario?

Vielen Dank im Voraus!

Answer 1

AppBar interne Implementierung Prüfung Typ des Elements zu iconElementRight Eigenschaft bereitgestellt. Das Thema wird 'automatisch' nur für den Fall der expliziten Übereinstimmung mit einigen vordefinierten Werten bereitgestellt, wie FlatButton für Ihr Beispiel.

Hier ist, wie diese intern arbeitet (aus Material-ui/AppBar Quellcode):

// around 239 line 
if (iconElementRight) { 
    var iconElementRightProps = {}; 

    switch (iconElementRight.type.muiName) { 
    case 'IconMenu': 
    case 'IconButton': 
     var iconElemRightChildren = iconElementRight.props.children; 
     var _iconButtonIconStyle = !(iconElemRightChildren && iconElemRightChildren.props && iconElemRightChildren.props.color) ? styles.iconButtonIconStyle : null; 

     iconElementRightProps.iconStyle = (0, _simpleAssign2.default)({}, _iconButtonIconStyle, iconElementRight.props.iconStyle); 
     break; 

    case 'FlatButton': 
     iconElementRightProps.style = (0, _simpleAssign2.default)({}, styles.flatButton, iconElementRight.props.style); 
     break; 

    default: 
    } 

Wie Sie sehen können, wenn Sie einige benutzerdefinierte Komponente Sie Stile anwenden müssen Bereitstellung Thema manuell anzupassen, zum Beispiel mit Kontext:

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

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