折り返しコンポーネントが折り返しスタイル

Question

const Login =() => (
    <FlatButton label="Login" /> 
); 

export class App extends Component { 
    render() { 
    return (
     <div className="container"> 
     <MuiThemeProvider> 
      <AppBar 
      iconElementRight={<Login />} 
      /> 
     </MuiThemeProvider> 
     </div> 
    ); 
    } 
} 

結果は壊れたスタイリングのボタンです。ここ

画像である：http://i.imgur.com/1IHboDq.png

しかし、直接完全に正常に動作コンポーネントを挿入します。このよう ：

 <AppBar 
     iconElementRight={<FlatButton label="Login" />} 
     /> 

http://i.imgur.com/1kUaVYT.png

は私が何か間違ったことをやっているか、これはバグでしょうか？

Answer 1

材料-UIのAppBar.jsは、特にあなたがiconElementRightに入れ部品の種類を見て、その本来の材料-UI IconMenu、IconButton、またはFlatButtonあれば、それに適切なスタイルを適用します。いずれかをラップすると、検出に失敗し、スタイルは適用されません。したがって、同じスタイルを自分自身の<Login />コンポーネントに適用する必要があります（ちょうどcolorのようになり、計算されたmarginTopのように見えます）。 AppBar.jsから

関連するコード...

https://github.com/callemall/material-ui/blob/master/src/AppBar/AppBar.js

const flatButtonSize = 36; 

const styles = { 
    // ... 
    flatButton: { 
    color: appBar.textColor, 
    marginTop: (iconButtonSize - flatButtonSize)/2 + 1, 
    }, 
    // ... 
}; 

// ... 

switch (iconElementRight.type.muiName) { 
    case 'IconMenu': 
    case 'IconButton': 
    // ... 
    break; 
    case 'FlatButton': 
    iconElementRightProps.style = Object.assign({}, styles.flatButton, iconElementRight.props.style); 
    break; 
    default: 
} 

例：

// Using material-ui's default IconButton size of 48... (48 - 36)/2 + 1 = 7 
<Login style={{ color: 'white', marginTop: 7 }} /> 

Answer 2

あなたはすでにこれを知っているかもしれませんが、念のために、あなたは周り<MuiThemeProvider></MuiThemeProvider>を包む場合親のJSXファイルではなく、すべてのファイルの代わりにそのファイルを呼び出すだけです。 MuiThemeProviderの複数のインスタンスが問題を引き起こしている可能性があります。