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

Material UI v5 update

1. Use sx prop

<AppBar sx={{ bgcolor: "green" }}>

2. Set primary.main color in Palette

The Appbar background color uses the primary color provided from the theme by default.

const theme = createTheme({
  palette: {
    primary: {
      main: "#00ff00"
    }
  }
});

3. Set AppBar default styles in styleOverrides

Use this one if you don't want to touch the primary.main value and potentially affect other components:

const theme = createTheme({
  components: {
    MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: "red"
        }
      }
    }
  }
});

Answer 2

You can set the background color directly using sx property

<AppBar variant='elevated' sx={{backgroundColor:'#19857b'}}>

Answer 3

Working on @NearHuscarl answer. If you want the styles to be applied no matter which appbar color you are on: E.g. <Appbar color="secondary" or <Appbar color="primary". You could alternatively use the root property:

const theme = createTheme({
  components: {
    MuiAppBar: {
      root: {
        colorPrimary: {
          backgroundColor: "red"
        }
      }
    }
  }
});

The difference is the root keyword

Answer 4

• Please make theme.js first.

- theme.js
import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';

export default createMuiTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

• Add these lines to index.js

import { ThemeProvider } from '@material-ui/core/styles'
import theme from './theme'

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />    
  </ThemeProvider>,
  document.getElementById('root')
);

<AppBar position='static' color='secondary' elevation={2}>
  ...
</AppBar>

*** important ***

secondary: {
  main: '#19857b',
},

color='secondary'

Answer 5

first of all, add const to the file. Then apply to the line u need as following shown.

const styles = { button: { margin: 15,}, appBarBackground:{ background : '#2E3B55' }};

Then add it to the line as shown down

 style={styles.button}
 style={styles.appBarBackground}

Answer 6

Create your style using makeStyles():

const useStyles = makeStyles(theme => ({
  root: {
    boxShadow: "none",
    backgroundColor: "#cccccc" 
  } 
}));

Use the above style in your component:

const classes = useStyles();

<AppBar className={classes.root} />

Answer 7

You cat add this inline your code

<AppBar title="My AppBar" style={{ backgroundColor: '#2196F3' }} >

or if your css

import './home.css';

put this to your code

.title {
text-align: left;
background-color: black !important;}

Hope to help.

Answer 8

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 9

By default it uses palette's contrastText prop (v3):

const theme = createMuiTheme({
  palette: {
    primary: {
      contrastText: 'rgba(0,0,0,0.8)'
    }
  },
});

Answer 10

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

Answer 11

Finally, I came to know about titleStyle for styling title in AppBar.

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

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