Before Material-UI, you need to know...

React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

A simple div component:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

Note the render call in the component

A stateful component

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

.setState() can trigger component update

Super easy to make UI hierarchy

render: function() {
  return (
    <App>
      <FancyTitleForYourTodoList/>
      <TodoList>
        {_.map(todos, function(todo){
          return <TodoListItem item={todo}/>;
        })}
      </TodoList>
    </App>
  );
}

Before Material-UI, you need to know...

Material Design

Presented by

It's an UI guideline about MOTION, STYLE, COMPONENT, LAYOUT, PATTERNS...

Buttons

Card

Date Picker

Material-UI

A Set of React Components that Implement Google's Material Design

Usage

• Provide the theme

// ./App.js
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Usage

• Use Material-UI's components

// ./MyAwesomeReactComponent.js
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
  <RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

Customization

We use

import getMuiTheme from 'material-ui/styles/getMuiTheme';

, where muiTheme is based on lightBaseTheme

• spacing can be used to change the spacing of components.
• fontFamily can be used to change the default font family.
• palette can be used to change the color of components.
• zIndex can be used to change the level of each component.
• isRtl can be used to enable the right to left mode.
• There is also one key for each component so you can use to customize them individually:
  • appBar
  • avatar
  • ...

Customize it before using the theme:

const muiTheme = getMuiTheme({
  palette: {
    textColor: cyan500,
  },
  appBar: {
    height: 50,
  },
});

class Main extends React.Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar title="My AppBar" />
      </MuiThemeProvider>
    );
  }
}

export default Main;

• note the cyan500 in the code

Colors for Material-UI

import {cyan500, blue700} from 'material-ui/styles/colors';

Inline Style

To override the theme for one component

const styles = {
  checkBox: {
    width: '50px',
    margin: '0 auto'
  },
  checkBoxIcon: {
    fill: '#FF4081'
  }
}

<Checkbox
  id="checkboxId1"
  name="checkboxName1"
  value="checkboxValue1"
  label="went for a run today"
  style={styles.checkBox}
  iconStyle={styles.checkBoxIcon}
/>

Inline Style

You can also mix Inline and CSS Styles (not recommended)

<Checkbox
  id="checkboxId1"
  name="checkboxName1"
  value="checkboxValue1"
  label="went for a run today"
  className="muidocs-checkbox-example"
  iconStyle={{
    fill: '#FF9800'
  }}/>

/* In our CSS file */
.muidocs-checkbox-example {
  border: 2px solid #0000FF;
  background-color: #FF9800;
}

Component

Let's have a FlatButton

Other Solutions

No only can Material-UI do the UI job

• Material Design Lite

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised
 mdl-js-ripple-effect mdl-button--accent">
  Button
</button>

• Semantic UI

<div class="ui three buttons">
  <button class="ui active button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

References:

• React
• Material Design
• Material-UI
• Material Design Lite
• Semantic UI