陣營的主題並不適用於兒童的組件

這是我的第一次互動與反應過來，代碼如下：陣營的主題並不適用於兒童的組件

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

結果有所不同：

請問爲了將主題傳播到子組件以及它爲什麼會在第二種情況下工作，我錯過了什麼？

在此先感謝！

來源

2017-05-27 gigi

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

來源

2017-05-27 13:10:11

陣營的主題並不適用於兒童的組件

回答

相關問題