วิธีใช้งาน Material-UI (MUI) กับ React โปรเจกต์ พร้อมตัวอย่างโค้ด

Material-UI เป็นเครื่องมือสำคัญที่ช่วยให้การสร้าง UI ด้วย React เป็นเรื่องง่ายและสวยงามมากยิ่งขึ้น ด้วยความสามารถในการปรับแต่งและใช้งานอย่างรวดเร็ว ทำให้ผู้พัฒนาสามารถติดตั้งและตั้งค่าต่าง ๆ ภายในนั้นได้ง่าย โดยในบทความนี้ของ Till it’s done จะสอนวิธีการติดตั้งและใช้งาน React Material UI พร้อมตัวอย่างโค้ดที่ใช้งานจริง มาลองใช้ React Material UI เพื่อยกระดับโปรเจกต์ React ของคุณให้ดูน่าสนใจและใช้งานได้อย่างมืออาชีพกันครับ

ความสำคัญของ React Material UI

React Material UI หรือที่รู้จักกันในชื่อ MUI เป็นไลบรารี UI ที่ได้รับความนิยมอย่างสูงในการพัฒนาแอปพลิเคชันเว็บด้วย React เนื่องจากมีความสำคัญและคุณสมบัติที่ช่วยเสริมสร้างประสบการณ์การพัฒนา รวมถึงคุณภาพของผลิตภัณฑ์อย่างมาก

เนื่องจาก Material-UI  มาพร้อมกับชุด Component สำเร็จรูปที่ถูกออกแบบตามแนวทาง Material Design ของ Google ซึ่งช่วยลดเวลาในการเขียนโค้ดและออกแบบ UI ตั้งแต่ต้น ผู้พัฒนาสามารถนำ Component เหล่านี้มาใช้งานได้ทันที โดยไม่ต้องสร้างจากศูนย์ ทำให้สามารถส่งมอบโปรเจกต์ได้เร็วขึ้น

อีกทั้งยังรองรับแนวทางการออกแบบที่ดูทันสมัย, สวยงาม และเป็นมาตรฐาน ทำให้ UI ที่ได้ดูเป็นมืออาชีพ คงความสมดุลและสอดคล้องกันในทุกหน้าจอ ซึ่งช่วยสร้างความน่าเชื่อถือและความประทับใจให้กับผู้ใช้งาน นอกจากนี้ยังมีความสามารถในการปรับแต่งอย่างยืดหยุ่นตามความต้องการของโปรเจกต์ เช่น การเปลี่ยนธีมสี, การปรับขนาด, การเพิ่มฟีเจอร์เฉพาะ หรือการสร้าง Component แบบกำหนดเอง ซึ่งทำให้สามารถตอบโจทย์ความต้องการเฉพาะได้อย่างลงตัว 

รวมไปถึงมันยังถูกออกแบบให้สามารถใช้งานร่วมกับเครื่องมือและไลบรารีอื่น ๆ ของ React ได้อย่างราบรื่น เช่น Redux, React Router และอื่น ๆ ทำให้การพัฒนาแอปพลิเคชันเป็นไปอย่างไร้รอยต่อ และเนื่องจาก Material-UI เป็นไลบรารียอดนิยม จึงมีชุมชนผู้ใช้งานและนักพัฒนาที่ให้ความช่วยเหลือและพัฒนาฟีเจอร์ใหม่ ๆ อย่างต่อเนื่อง ทำให้สามารถแก้ปัญหาและพัฒนาโปรเจกต์ได้อย่างมั่นใจนั่นเองครับ

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

1. การติดตั้ง Material-UI ในโปรเจกต์ React

ก่อนเริ่มใช้งาน คุณจำเป็นจะต้องติดตั้งแพ็กเกจของ MUI และ Peer Dependencies ซึ่งประกอบด้วย @mui/material สำหรับ Component UI หลัก กับ @emotion/react และ @emotion/styled สำหรับการจัดการสไตล์

โดยสามารถพิมพ์คำสั่งติดตั้งผ่าน npm ได้ด้วยคำสั่ง npm install @mui/material @emotion/react @emotion/styled

หรือหากใช้ yarn ให้พิมพ์คำสั่ง yarn add @mui/material @emotion/react @emotion/styled แทน

2. การตั้งค่าพื้นฐานในโปรเจกต์ React

หลังจากติดตั้งแล้ว คุณควรหุ้มแอปของคุณด้วย ThemeProvider ซึ่งเป็น Component ของ MUI ที่ช่วยให้สามารถปรับแต่งธีมได้ง่ายในไฟล์ App.js หรือไฟล์หลักของคุณ ก็สามารถใช้งาน Component ของ MUI ได้ทันที ตัวอย่างเช่น

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./App’;

import { ThemeProvider, createTheme } from ‘@mui/material/styles’;

// สร้างธีมพื้นฐาน

const theme = createTheme({

  palette: {

    primary: {

      main: ‘#1976d2’, // สีน้ำเงิน

    },

    secondary: {

      main: ‘#dc004e’, // สีชมพู

    },

  },

});

ReactDOM.render(

  <React.StrictMode>

    <ThemeProvider theme={theme}>

      <App />

    </ThemeProvider>

  </React.StrictMode>,

  document.getElementById(‘root’)

);

3. การใช้งาน Components พื้นฐานของ MUI

นี่เป็นตัวอย่างการใช้งาน Component พื้นฐาน เช่น Button, Typography, Container ซึ่งตัวอย่างนี้จะแสดงให้เห็นถึงการใช้งาน Container สำหรับจัดวาง, Typography สำหรับข้อความ และ Button สำหรับปุ่ม

import React from ‘react’;

import { Button, Typography, Container } from ‘@mui/material’;

function App() {

  return (

    <Container maxWidth=”sm” style={{ marginTop: ’50px’ }}>

      <Typography variant=”h4″ gutterBottom>

        ยินดีต้อนรับสู่โปรเจกต์ React ด้วย Material-UI

      </Typography>

      <Button variant=”contained” color=”primary”>

        คลิกที่นี่

      </Button>

    </Container>

  );

}

export default App;

4. การปรับแต่ง Theme และใช้งาน Custom Component

เพื่อให้ UI ของคุณมีความเป็นเอกลักษณ์และสอดคล้องกับดีไซน์ คุณสามารถปรับแต่งธีมของแอปได้ เช่น การเปลี่ยนสี ตัวอักษร หรือลักษณะเฉพาะอื่น ๆ ซึ่งมีตัวอย่าง ดังนี้

import { createTheme } from ‘@mui/material/styles’;

const customTheme = createTheme({

  palette: {

    primary: {

      main: ‘#ff5722’, // สีส้ม

    },

    secondary: {

      main: ‘#009688’, // สีเขียว

    },

  },

  typography: {

    fontFamily: ‘Arial, sans-serif’,

  },

});

จากนั้นให้นำไปใช้กับ ThemeProvider ด้วยคำสั่งต่อไปนี้

<ThemeProvider theme={customTheme}>

  <App />

</ThemeProvider>

นอกจากนี้ คุณยังสามารถสร้าง Custom Component เองได้โดยการใช้ styled หรือสร้าง Component ที่ผสมผสานการใช้งานของ MUI เข้ากับการปรับแต่งเฉพาะตัว เช่น

import { styled } from ‘@mui/material/styles’;

import Button from ‘@mui/material/Button’;

const MyCustomButton = styled(Button)({

  backgroundColor: ‘#4caf50’,

  ‘&:hover’: {

    backgroundColor: ‘#388e3c’,

  },

});

function App() {

  return (

    <MyCustomButton variant=”contained”>

      คำสั่งของฉัน

    </MyCustomButton>

  );

}

ตัวอย่างโปรเจกต์ React ด้วย Material-UI

import React from ‘react’;

import { TextField, Button, Box } from ‘@mui/material’;

function LoginForm() {

  return (

    <Box sx={{ maxWidth: 300, mx: ‘auto’, mt: 8 }}>

      <TextField fullWidth label=”ชื่อผู้ใช้” margin=”normal” />

      <TextField fullWidth label=”รหัสผ่าน” type=”password” margin=”normal” />

      <Button variant=”contained” color=”primary” fullWidth sx={{ mt: 2 }}>

        เข้าสู่ระบบ

      </Button>

    </Box>

  );

}

export default LoginForm;

สรุป

เพราะ React Material UI ช่วยให้การพัฒนา UI ด้วย React เป็นเรื่องง่ายและดูดีขึ้นอย่างรวดเร็ว ด้วยความสามารถในการปรับแต่งและใช้งานง่าย คุณสามารถติดตั้งและตั้งค่า MUI ได้ในไม่กี่ขั้นตอน ทำให้โปรเจกต์ของคุณดูเป็นมืออาชีพและน่าสนใจมากขึ้น นอกจากนี้ MUI ยังช่วยประหยัดเวลาในการออกแบบและสร้าง UI มาตรฐานที่สวยงามและใช้งานได้ดีในทุกโปรเจกต์ React ของคุณ

แต่หากใครกำลังมองหาบริษัทที่จะเข้ามาช่วยพัฒนาโปรเจคของธุรกิจคุณด้วย React Material UI อยู่ล่ะก็ พวกผม Till it’s done เป็นบริษัท Software House ซึ่งมีบริการรับทำเว็บไซต์ และมีประสบการณ์ภายในสายงานกว่า 10 ปี รวมถึงผ่านโครงการต่าง ๆ มามากกว่า 60 โครงการ ซึ่งสามารถช่วยให้คุณพัฒนา Cross Platform App ที่เหมาะสมกับธุรกิจของคุณ ได้อย่างคลอบคลุมและรอบด้านในทุกมิติ

ซึ่งสามารถติดต่อได้ที่เว็บไซต์ของของพวกผม Till it’s done หรือทางอีเมลล์ rick@tillitsdone.com นี้ได้เลยนะครับ