การติดตั้งและใช้งาน Material UI ในโปรเจกต์ React

ในบทความที่แล้ว เราได้ทำความรู้จักกับ Component Library ยอดนิยม 3 ตัว ได้แก่ Material UI, Ant Design และ Bootstrap แต่ละตัวก็มีจุดเด่นที่แตกต่างกันไป ในบทความนี้ เราจะมาเจาะลึก Material UI กันครับ โดยจะเริ่มตั้งแต่การติดตั้ง ไปจนถึงการใช้งาน Component พื้นฐานต่างๆ ในโปรเจกต์ React ของเรา

การติดตั้ง Material UI ด้วย npm หรือ yarn

ก่อนที่เราจะเริ่มใช้งาน Material UI ได้นั้น เราต้องทำการติดตั้ง package ที่จำเป็นลงในโปรเจกต์ React ของเราก่อนครับ เราสามารถทำได้โดยใช้ npm หรือ yarn ซึ่งเป็น package manager ยอดนิยมสำหรับ JavaScript

การติดตั้งด้วย npm

หากคุณใช้ npm ให้เปิด Terminal หรือ Command Prompt แล้ว navigate ไปยัง directory ของโปรเจกต์ React ของคุณ จากนั้นรันคำสั่งนี้:

npm install @mui/material @emotion/react @emotion/styled

คำสั่งนี้จะทำการติดตั้ง @mui/material ซึ่งเป็น package หลักของ Material UI และ @emotion/react กับ @emotion/styled ซึ่งเป็น library ที่ใช้สำหรับ styling ใน Material UI

การติดตั้งด้วย yarn

หากคุณใช้ yarn ให้เปิด Terminal หรือ Command Prompt แล้ว navigate ไปยัง directory ของโปรเจกต์ React ของคุณ จากนั้นรันคำสั่งนี้:

yarn add @mui/material @emotion/react @emotion/styled

คำสั่งนี้จะทำการติดตั้ง package เดียวกันกับ npm แต่ใช้ yarn เป็น package manager แทน

ข้อผิดพลาดที่พบบ่อย: บางครั้งการติดตั้งอาจเกิดข้อผิดพลาดเนื่องจาก version ที่ไม่ compatible กันของ packages ต่างๆ หากเกิดปัญหานี้ ให้ลอง update npm หรือ yarn ให้เป็น version ล่าสุด หรือลองระบุ version ของแต่ละ package ที่ต้องการติดตั้งให้ชัดเจน เช่น npm install @mui/material@5.15.0 @emotion/react@11.11.3 @emotion/styled@11.11.0

การนำเข้า Component ของ Material UI

เมื่อเราติดตั้ง Material UI เสร็จแล้ว เราก็สามารถนำเข้า Component ต่างๆ ของ Material UI มาใช้งานในโปรเจกต์ React ของเราได้เลยครับ โดยการ import Component ที่ต้องการจาก @mui/material

ตัวอย่างเช่น หากเราต้องการใช้งาน Button Component เราสามารถทำได้ดังนี้:

import Button from '@mui/material/Button';

function MyComponent() {
  return (
    <Button variant="contained">Click Me</Button>
  );
}

export default MyComponent;

ในตัวอย่างนี้ เราทำการ import Button Component จาก @mui/material และนำมาใช้ใน Component ของเรา โดยกำหนด variant="contained" เพื่อให้ Button มีสีพื้นหลัง

แนวคิดเชิงระบบ: Material UI ออกแบบมาให้ Component ต่างๆ สามารถนำมาประกอบกันได้อย่างอิสระ ทำให้เราสามารถสร้าง UI ที่ซับซ้อนได้ง่ายดาย โดยการนำ Component เล็กๆ หลายๆ ตัวมาประกอบกัน

การปรับแต่ง Component ของ Material UI

Material UI มี Component ให้เลือกใช้มากมาย แต่ละ Component ก็มี props (คุณสมบัติ) ให้เราปรับแต่งได้หลากหลาย เพื่อให้ Component มีลักษณะตามที่เราต้องการ

ตัวอย่างเช่น เราสามารถปรับแต่งสีของ Button Component ได้โดยใช้ color prop:

import Button from '@mui/material/Button';

function MyComponent() {
  return (
    <Button variant="contained" color="primary">Click Me</Button>
  );
}

export default MyComponent;

ในตัวอย่างนี้ เรากำหนด color="primary" เพื่อให้ Button มีสี primary ซึ่งเป็นสีหลักของ theme ที่เรากำหนดไว้ (เราจะพูดถึงเรื่อง theme ในบทความถัดไป)

นอกจากนี้ เรายังสามารถปรับแต่ง style ของ Component ได้โดยใช้ sx prop ซึ่งเป็น prop ที่ Material UI เตรียมไว้ให้สำหรับการกำหนด CSS styles โดยตรง

import Button from '@mui/material/Button';

function MyComponent() {
  return (
    <Button
      variant="contained"
      sx={{
        backgroundColor: 'green',
        color: 'white',
        '&:hover': {
          backgroundColor: 'darkgreen',
        },
      }}
    >
      Click Me
    </Button>
  );
}

export default MyComponent;

ในตัวอย่างนี้ เราใช้ sx prop เพื่อกำหนดสีพื้นหลังเป็นสีเขียว, สีตัวอักษรเป็นสีขาว และกำหนดสีพื้นหลังเป็นสีเขียวเข้มเมื่อ hover

Pattern ทั่วไป: การใช้ sx prop เป็นวิธีที่สะดวกในการปรับแต่ง style ของ Component แบบ inline แต่หากเราต้องการปรับแต่ง style ของ Component ในหลายๆ ที่ การสร้าง custom style object แล้วนำมาใช้ซ้ำ จะเป็นวิธีที่ maintainable มากกว่า

ตัวอย่างการใช้งาน Component พื้นฐาน

Material UI มี Component พื้นฐานให้เราเลือกใช้มากมาย เช่น

Button: ปุ่ม
Typography: ข้อความ
TextField: ช่องกรอกข้อความ
Box: คอนเทนเนอร์
Grid: ระบบ grid สำหรับจัด layout
AppBar: แถบ application bar
Card: การ์ด

เรามาดูตัวอย่างการใช้งาน Component เหล่านี้กันครับ

import React from 'react';
import { Button, Typography, TextField, Box, Grid, AppBar, Toolbar, Card, CardContent } from '@mui/material';

function MyComponent() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            My App
          </Typography>
        </Toolbar>
      </AppBar>
      <Grid container spacing={2} sx={{ padding: 2 }}>
        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h5" component="div">
                Login Form
              </Typography>
              <TextField label="Username" variant="outlined" fullWidth margin="normal" />
              <TextField label="Password" type="password" variant="outlined" fullWidth margin="normal" />
              <Button variant="contained" color="primary">
                Login
              </Button>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={12} md={6}>
          <Typography variant="body1">
            Welcome to my app! This is a simple example of using Material UI components.
          </Typography>
        </Grid>
      </Grid>
    </Box>
  );
}

export default MyComponent;

ในตัวอย่างนี้ เราสร้างหน้าจอ Login ง่ายๆ โดยใช้ Component ต่างๆ ของ Material UI เช่น AppBar, Card, TextField และ Button เราใช้ Grid Component เพื่อจัด layout ของหน้าจอให้สวยงาม

กรณีใช้งานจริง: ตัวอย่างนี้แสดงให้เห็นถึงการใช้งาน Material UI ในการสร้าง Form ที่ใช้งานได้จริง เราสามารถนำไปประยุกต์ใช้ในการสร้าง Form ที่ซับซ้อนมากขึ้นได้ โดยการเพิ่ม field ต่างๆ และ validation logic

ในบทความนี้ เราได้เรียนรู้วิธีการติดตั้งและใช้งาน Material UI ในโปรเจกต์ React ตั้งแต่เริ่มต้น รวมถึงการปรับแต่ง Component และการใช้งาน Component พื้นฐานต่างๆ ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับการปรับแต่ง Theme และ Style ใน Material UI เพื่อให้ UI ของเรามีลักษณะที่สอดคล้องกับ Design System ของเราครับ