如何在AppBar標題材質中應用不同的顏色-ii

Question

我正在嘗試將我的自定義顏色用於AppBar標題。 AppBar的標題是「我的AppBar」。我使用白色作爲我的主要主題顏色。它非常適合在酒吧，但在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; 

但是，調色板樣式覆蓋的AppBar‘標題’顏色和沒有標題正在顯示。我應該包括一些東西還是我放錯了位置？

這是我的輸出：

Answer 1

最後，我來了解titleStyle在AppBar造型稱號。

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