阵营的主题并不适用于儿童的组件

问题描述：

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

的问题是，主题应用到AppBar，而不是它的组成部分，是并且，这是我的了：

不过，如果我直接在AppBar成分附加从组件的代码改变头组件，就像这样：

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

结果有所不同：

请问为了将主题传播到子组件以及它为什么会在第二种情况下工作，我错过了什么？

在此先感谢！

答

AppBar内部实现检查类型提供给iconElementRight性能的元素的。主题将被自动提供给显式匹配类型的情况下，以某些预定义的值，例如FlatButton为您举例。

这里是如何工作的内部（从材料的UI/AppBar源代码所）：

// 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: 
    }

正如你所看到的，如果您提供您需要的样式应用于手动匹配主题的一些自定义组件，例如与上下文：

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

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

阵营的主题并不适用于儿童的组件

相关推荐