First Look into Material UI as a Front-End Developer

Material UI is a CSS framework and a set of React components that implement Google’s Material Design. It comes with lots of components and even a grid system for easy layout manipulation. It also comes with two separate themes: a dark and a light one, but what if you wanna make it colorful?

Modifying a theme

Minimal UI comes with a bunch of instructions on how to customize your project. In this blog post, I will share my experiences on how we set up a project from a front-end developer's point of view. First we want to set up a theme, in this case it's a single javascript file that defines and overwrites the default color palette. You can also define what font family you're going to use and some other options. In this case we created a file called, MuiTheme.js and placed it into the src folder. Following the material-ui instructions we created and defined the colors for primary1Color, primary2Color, etc. In this case we used the extensive colors that material-ui has, you can find these colors here: http://www.material-ui.com/#/customization/colors. After the file is created follow the steps on material-ui to get it hooked up into your project.

import {lightBlue700, lightBlue800, lightBlue900,
        yellowA700, orangeA400, blueGrey50, lightBlue100, 
        darkBlack} from 'material-ui/styles/colors'

export default {
  fontFamily: 'Source Sans Pro, sans-serif',
  palette: {
    primary1Color: lightBlue700,
    primary2Color: lightBlue800,
    primary3Color: lightBlue900,
    textColor: darkBlack,
    accent1Color: '#6C6D6E',
    accent2Color: yellowA700,
    accentYellow: yellowA700,
    accentOrange: orangeA400,
    canvasColor: blueGrey50,
    titleColor: lightBlue100,
    iconColor: '#6C6D6E',
    white: '#FFFFFF'
  },
  toolbar: {
    iconColor: darkBlack,
    backgroundColor: 'transparent'
  }
}

One thing I noticed was I did not know exactly where all these pre-defined colors were going to be used at. I found out that looking at the file "/node_modules/material-ui/styles/getMuiTheme.js" you can overwrite these colors and styles for each component. In the above example, I styled the toolbar to have a background transparent color instead of a grey color with an opacity added to it by default. They also used iconColor for the actual text, which was kind of strange.

Using components and modifying existing colors

Using components are very easy, but modifying them to fit a certain look can be a little challenging. The best way I found was to use the custom color palette and SASS files. You can always use inline styles, but it's good to keep your styles in centralized files. Plus, as a themer I know the syntax for CSS/sass better than the inline styles (eg. padding-top vs paddingTop).

export const LeftNavigation = ({children}, context) => {
  return (
    <Menu listStyle={{paddingTop: 0}}>
      <MenuItem style={{backgroundColor: context.muiTheme.palette.primary1Color}} />
    </Menu>
  )
}

LeftNavigation.contextTypes = {
  muiTheme: React.PropTypes.object.isRequired
}

export default LeftNavigation

The above example shows us a menu component that takes on the background color of the palette's primary1Color. Note: we also can place inline styles here.

Using SASS files

In the example below we create a SASS file and import it to javascript file. You then have to pass in the className with the corresponding class name from the SASS file. In this case we created a HomeView.scss file and added the class name "appDivider" to the Divider component.

JS FILE:

import classes from './HomeView.scss'
export const HomeView = () => (
  <Divider className={classes.appDivider} />
)
export default HomeView

HomeView.scss:

.appDivider {
  margin-bottom: 25px;
  padding-top: 0px;
}

In HomeView.scss file you can write up the styles for the classes you defined in the JS File (appDivider). I also learned that adding another class name that is not being used in the JS file will not be used, it just gets ignored. So be sure to define the classnames inside the JS files. Also, sometimes if you want to modify the paddings or margins you would need to overwrite them using inline styles instead of the SASS file or use "!important".

Learning Curve

There is a bit of a learning curve, I had struggles removing and adding margins and paddings to components. Sometimes components add extra components within, for example using the menu component also inserts a List component. A tool to help you work with this is a chrome extension called React Developer Tools. The more I play with Material UI, the more familiar it gets and things start to make sense. I hope I get a chance to use Material UI again, like other frameworks it's getting refined and improving for developers. It has all the expected components a platform needs and has its Material style that is based on Google.