Đối với các lập trình viên thì cái tên boostrap chắc đã quá quen thuộc để làm đẹp trang web của bạn. Trong reactjs thì mọi thứ đều quy ra thành component nên mọi thứ hỗ trợ cho nó cũng chính vì thế mà cũng quy ra component cả. Boostrap cũng không phải ngoại lệ. Boostrap cũng có các hệ thống component để hỗ trợ cho các dự án dùng reactjs. Nhưng hôm nay mình xin giới thiệu một thư viện khác. Hình như là nó sinh ra để đi kèm với react theo mình tới thời điểm hiện tại là như vậy. Ngay từ những dòng introduction đầu tiên thì nó cũng đã khuyên là nên biết react trước khi học về nó. Đó là Material-UI. Nên bài viết này mình sẽ hướng dẫn các bạn sử dụng nó trong dự án dùng reactjs. Material-UI cũng cấp cho bạn khá đầy đủ các component để có thể tạo ra một trang web một cách nhanh chóng hơn, mà không phải đi ngồi css từng tí một. Rất tiện lợi, chỉ cần cài đặt thư viện này và sử dụng. Tùy theo yêu cầu mà của ta mà custom theo ý minh.

Setup Material-UI

Material ui thì có sẵn như một npm package

npm install material-ui

khuyên các bạn là nên cài bản ổn định, đừng đi cà bản Pre-release, không có lúc nào mà có lỗi lại khóc lóc . Trong nhiều components của materail-ui sử dụng react-tap-event-plugin để lắng nghe các sự kiện như touch/tap/clickevents. Để có thể sử dụng thì chỉ cần thêm

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

vào component cha chung to nhất để có thể sử dụng nó ở nhiều nơi và chỉ cần gọi onTouchTap(). ./App.js

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

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

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

App này sẽ chứa tất cả toàn bộ component của trang web mà mình sẽ làm.

Usage

Theme Material-ui cung cấp 2 base theme với background-color là light và dark. Nhìn đoạn code phía trên thì các bạn có thể thấy mình đã sử dụng theme rồi. Chính là đoạn này:

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

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

Material-UI sử dụng single JS object để gọi muiTheme. Mặc định muiTheme dựa trên lightBaseTheme. muiTheme object chứa các khóa:

• spacing: được sử dụng để thay đổi khoảng cách của các components.
• fontFamily: được sử dụng để thay đổi font family mặc định.
• palette: được sử dụng để thay đổi màu của các component.
• isRtl có thể được sử dụng để cho phép chuyển từ chế độ từ phải sang trái. ... ví dụ:

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

const theme = getMuiTheme({
  fontFamily: "Mieryo, 'メイリオ', sans-serif",
  palette: {
    primary1Color: "#f49ac1",
    accent1Color: "#555555",
  },
});

export default theme;

Style Nếu bạn muốn dùng inline style:

import React from 'react';
import Checkbox from 'material-ui/Checkbox';

const StylesOverridingInlineExample = () => (
  <Checkbox
    name="StylesOverridingInlineExample"
    label="Checked the mail"
    style={{
      width: '50%',
      margin: '0 auto',
      border: '2px solid #FF9800',
      backgroundColor: '#ffd699',
    }}
  />
);

export default StylesOverridingInlineExample;

Còn nếu ban muốn viết css riêng cho một component nào của react thì hãy đặt className cho component đó và viết ra file css bình thường. Nhưng có một chú ý là để có thể css lại cho 1 component mà ko dùng inline style thì các bạn phải dùng !impotant thì css mới nhận nhé.

Icon Hiện tại thì trong dụ án của mình đang dùng bộ icon của material icons. Mình thấy nó cũng khá là đầy đủ. dể sử dụng và cũng đẹp mắt. Nó cũng dễ dàng cài đặt và sử dụng. Các bạn xem thêm trong component Icons của material-ui.

conclusion

Sau khi sử dụng materail ui với reactjs thì mình thấy nó khá là tiện dụng. Các bạn nào mới bắt đầu với react thì hãy dùng thử nó. Có 2 example được dùng với webpack và browserify do material cung cấp. Các bạn có thể clone về và xem thử nó thú vị hay không. Hi vọng sau khi sử dụng các bạn sẽ thích nó. Mọi ý kiến xin các bạn để lại ở phần comment bên dưới. Cảm ơn đã ghé qua.

references

http://www.material-ui.com https://material.io/icons