How to apply different color in AppBar Title material-ui

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