Reactjs – How to use Material UI ThemeManager for setting custom AppBar height and color

browserifymaterial-uimeteorreactjs

I'm using the Callemall react material-ui dependency within a meteor app. I am wondering how I can change the color and height of the AppBar I'm using. Is this possible by using inline styles to override the theme variables? If so, how?

injectTapEventPlugin();
var {AppBar} = MUI;
var {ThemeManager, LightRawTheme} = Styles;

Header = React.createClass({
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(LightRawTheme);
    }
        ;
    },

    render: function () {
        return (
            <AppCanvas>
                <AppBar iconElementLeft={
                    <div className="header-left-area">
                        <FloatingActionButton
                            title="Register"
                            iconClassName="muidocs-icon-action-grade"
                            secondary={true}
                            mini={true}/>
                    </div>
                }/>
            </AppCanvas>
        );
    }
});

Best Answer

You might want to stay away from the inline style prop. See this.

All Material-UI components have their styles defined inline. You can read the discussion thread regarding this decision as well as this presentation discussing CSS in JS.

However, we have experienced important limitations with this approach.

  • Poor performance as recomputing all the styles at each render
  • Hustle debugging
  • Server-side media queries
  • Server-side pseudo element
  • Longer time to interaction with server-side rendering (E.g. :hover)

We have Material UI v1.0 now.

Material UI v1.0

You have many options to do this - look at the implementation code to understand how it works.

If this is your theme

const YourTheme = createMuiTheme({
  palette: createPalette({
    background: {
      appBar: '#000'
    }
  }),
  overrides: {
    MuiAppBar: {
      root: {
        background: '#fff'
      }
    }
  }

});

You have many options, here are 2:

1 Use the default color you just coded

<AppBar color={'default'}>
...
</AppBar>

AppBar will be white #fff.

2 Or Inherit the color from palette.background.appBar

<AppBar color={'inherit'}>
...
</AppBar>

AppBar will be black #000.

Related Topic