How to apply different color in AppBar Title MUI?

Question

I am trying to use my custom color for AppBar header. The AppBar has title 'My AppBar'. I am using white as my primary theme color. It works well for the bar but the 'title' of the AppBar is also using same 'white' color'

Here is my code:

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; 

But, the palette styles override the AppBar 'title' color and no title is displaying. Should I include something or I have misplaced any ?

And this is my output :

Answer 1

If you ant to change your Appbar background in material ui design ....try following code

<AppBar style={{ background: '#2E3B55' }}> 

or if you want to apply className then follow this step

first of all make create const var

const style = {      background : '#2E3B55'; };  <AppBar className={style}> 

Answer 2

From what I see in the material-ui sources, appBar title color is set by palette.alternateTextColor. If you add it to your style definition like that:

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

You should see your title without need to style it manually inside each component.

There are more styling parameters to MuiTheme described here