Hseleiro Hseleiro - 2 months ago 26
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 = () => (

<AppBar

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?

Answer

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 />
  </MuiThemeProvider>;

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.