AppBarで異なる色を適用する方法材質 - ui

Question

AppBarヘッダーにカスタム色を使用しようとしています。 AppBarのタイトルは「My AppBar」です。私は主なテーマカラーとして白を使用しています。 『タイトル：それは

import React from 'react'; 
import * as Colors from 'material-ui/styles/colors'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import AppBar from 'material-ui/AppBar'; 
import TextField from 'material-ui/TextField'; 

    const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: Colors.darkBlack, 
    primary1Color: Colors.white, 
    primary2Color: Colors.indigo700, 
    accent1Color: Colors.redA200, 
    pickerHeaderColor: Colors.darkBlack, 
    }, 
    appBar: { 
    height: 60, 
    }, 
}); 

class Main extends React.Component { 
    render() { 
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy 
    // using React's context feature. 
    return (
     <MuiThemeProvider muiTheme={muiTheme}> 
     <AppBar title="My AppBar"> 
     <div> 
    < TextField hintText = "username"/> 
    < TextField hintText = "password"/> 

    </div> 

     </AppBar> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default Main; 

しかし、パレットのスタイルは、アプリケーションバー上書きここ

が私のコードは』をも同じ「白」色を使用しているバーが、アプリケーションバーの「タイトル」に適しています色とタイトルが表示されていません。私は何かを含めるべきですか、私は何かを間違っていますか？

そして、これは私の出力です：

Answer 1

は最後に、私は、アプリケーションバーでスタイリングタイトルのtitleStyleについて知るようになりました。

const titleStyles = { 
    title: { 
    cursor: 'pointer' 

    }, 
    color:{ 
    color: Colors.redA200 
    } 
}; 
<AppBar title={<span style={titleStyles.title}>Title</span>} titleStyle={titleStyles.color}> ............. 
</AppBar> 

Answer 2

material-uiソースから見ると、appBarタイトルの色はpalette.alternateTextColorによって設定されます。次のようなスタイル定義に追加した場合：

const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: Colors.darkBlack, 
    primary1Color: Colors.white, 
    primary2Color: Colors.indigo700, 
    accent1Color: Colors.redA200, 
    pickerHeaderColor: Colors.darkBlack, 
    alternateTextColor: Colors.redA200 
    }, 
    appBar: { 
    height: 60, 
    }, 
}); 

各コンポーネント内で手動でスタイルを設定する必要はありません。

MuiThemeに、よりスタイリングのパラメータがありますがhere