มาลองใช้ MUI ขึ้นหน้าเว็บบน React ให้ง่ายกว่าเดิมกัน

ในวันนี้เราจะมาลองใช้ MUI ขึ้นหน้าเว็บบน React ให้ง่ายกว่าเดิม MUI (Material-UI) เป็นไลบรารี UI สำหรับ React ที่ถูกออกแบบมาเพื่อช่วยให้การสร้างเว็บแอปพลิเคชันแบบ Responsive ได้ง่ายและสวยงาม

การเริ่มต้นใช้ MUI กับ React

เพื่อเริ่มต้นใช้ MUI กับ React แค่ทำการติดตั้ง MUI ผ่าน npm โดยใช้คำสั่งดังนี้:

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

เมื่อเสร็จสิ้นการติดตั้ง ให้เริ่มจากการ Import บางคอมโพเน้นต์ และทำการนำมาใช้งานในโค้ดของ React ของคุณ

การใช้ MUI ในโค้ดของ React

เมื่อเราได้ทำการติดตั้ง MUI เรียบร้อยแล้ว เราสามารถนำคอมโพเน้นต์ต่าง ๆ ของ MUI มาใช้งานในโค้ดของ React ได้โดยอ้างอิงจากเอกสาร API ที่มีให้ ตัวอย่างเช่น:

    
      import { Button } from '@mui/material';
      
      function App() {
        return (
          <Button variant="contained" color="primary">
            กดปุ่ม
          </Button>
        );
      }
    
  

ที่นี่เราใช้ Button และกำหนดค่า variant เป็น contained และ color เป็น primary ซึ่งจะทำให้ปุ่มแสดงผลเป็นสีน้ำเงิน น่าสนใจใช่ไหม?

สรุป

การใช้ MUI ขึ้นหน้าเว็บบน React ให้ง่ายกว่าเดิมทำให้เราสามารถสร้างเว็บแอปพลิเคชันที่สวยงามและ Responsive ได้อย่างรวดเร็ว หากคุณกำลังมองหาวิธีในการปรับปรุง UI ของ React ของคุณ ให้ลองใช้ MUI ดูนะคะ!