62

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 : enter image description here

11 Answers 11

50

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

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"
        }
      }
    }
  }
});
5
  • 4
    This is the most complete and up-to-date answer for those using MUI v5. Jan 14, 2022 at 2:16
  • 1
    I also found that if you're trying to set the background-color to black, you have to also set backgroundImage: 'unset' because for some reason MUI adds a subtle linear gradient to the AppBar. Apr 30, 2022 at 22:47
  • Note: with dark mode, it does not color the appbar by default, see mui.com/material-ui/react-app-bar/#enable-color-on-dark
    – Colin D
    Feb 15 at 15:02
  • 1
    Note the latest release the app does not use the primary color anymore see here Using style overides works
    – notzippy
    Feb 15 at 19:51
  • To fully change the color, I found it necessary to - as remarked above - remove the linear gradient. I accomplished this by specifying the style in the AppBar component: <AppBar position="fixed" color="primary" style={{ backgroundImage: 'none', boxShadow: 'none' }}> Aug 24 at 18:39
16

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

2
  • Is it supposed to be exported? I created a similar thing in App.js following the imports, and no colors changed.
    – HomeMade
    Nov 19, 2017 at 14:27
  • Ah, got it working, I forgot to add muiTheme={muiTheme} inside <MuiThemeProvider/>
    – HomeMade
    Nov 19, 2017 at 14:29
10

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} />
1
  • 1
    I have the same and it does not work..
    – Karol
    Jul 15, 2022 at 14:41
7
  • 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'
1
  • By far the most credible answer.
    – Kleioz
    Jun 18, 2022 at 9:07
6

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

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

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

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

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.

0

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

0

You can set the background color directly using sx property

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.