Hseleiro Hseleiro - 1 month ago 8
React JSX Question

Getting start with React and Material Ui

I'm starting to understand to work with Material Ui with React, I'm getting difficult to customize the components.

I have this example of the AppBar:

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';

const styles = {
title: {
cursor: 'pointer',

const AppBarExampleIconButton = () => (


title={<span styles={styles.title}>Portofolio</span>}

iconElementRight={<FlatButton label="Save" />} />


export default AppBarExampleIconButton;

I can customize the title, but I want to customize the AppBar, in the documentation the Style object Override the inline-styles of the root element. But I'm not understanding out it works, could someone help me?


Depend on of what you try to do you can customize the AppBar in a multiple way. One of them is if you only want to change the color etc to make a theme.js file and import it inside MuiThemeProvider

You do this in the root file of your app. Ex

// Material Setup
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

// Our Own Theme
import theme from './layout/theme';

const Root = () =>
  <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
    <YourApp />

SO if you want to do this inline like you say you make a object inside your styles object who is the css you want to apply to the appbar.

const styles = { 
  appbar: {
    backgroundColor: 'blue'

And you call it as a props for the AppBar component

<AppBar style={styles.appbar} />

Also if you look at the docs here you can see the title have is own style props for him call titleStyle

Hope that can help you figured out.