คอร์สฟรี Material UI v6 จากผู้พัฒนา

สอนโดย ศิริวัชร์ คุณาพร (จุ้น) Software Engineer @MUI

Intro

• คอร์สนี้คืออะไร? สอนการใช้งาน React Material UI v6 สำหรับสร้าง web interface
• เหมาะกับใคร? นักพัฒนาที่มีประสบการณ์ React เบื้องต้นมาแล้ว และยังไม่เคยใช้ Material UI หรือเคยใช้ในเวอร์ชั่นก่อนๆ
• เรียนจบแล้วได้อะไร?
  • วิธีการเรียกใช้งาน Material UI component
  • เข้าใจการ custom styles ใน Material UI component
  • สามารถสร้าง theme ของตัวเองได้ จัดการ font, สี
  • ทำให้ app รองรับ light & dark mode ได้
  • สร้าง login form ตามมาตรฐานของเว็บได้
  • ประยุกต์สร้าง custom component เพื่อใช้งานกับ Material UI ได้
• คอร์สนี้ไม่ครอบคลุมอะไร?
  • คอร์สนี้เป็นการทำ mockup UI เท่านั้น ไม่มี application logic
  • ไม่มี server เข้ามาเกี่ยวข้อง เป็น client-side และ local ทั้งหมด

Lessons

ผลลัพธ์สุดท้ายคือหน้า Login Form ที่ผ่านการ theme แล้ว (link to Demo):

Checkout commit "Start from scratch" แล้วสร้าง branch ใหม่ (ใช้ชื่อตัวเอง เพราะหลังจากจบคอร์ส อยากให้เปิด PR มาให้ตรวจครับ)

ควรเปรียบเทียบ Solution ที่ได้กับ solution ในแต่ละ lesson. เรื่องของการเขียน CSS อาจไม่เหมือนกัน ไม่เป็นไร สำคัญที่ได้เรียนรู้วิธีการใช้ Material UI และ theme ในการสร้าง UI.

L1 - render Button component

Requirement: render Button component ของ Material UI ให้ได้

Lesson guide, Docs, Solution

Note: yarn.lock เกิดขึ้นจากการใช้ yarn ในการ install package แทน npm ถ้าใช้ npm จะเกิด package-lock.json แทน

L2 - CSS Reset

Browser จะมีการเซ็ต CSS default ที่ไม่เหมือนกัน CSS reset เลยเป็นที่นิยมเพราะว่าทำให้สไตล์เป็นมาตรฐานเดียวกันระหว่างเบราว์เซอร์ต่างๆ Material UI ก็มี CSS reset เป็นของตัวเองในชื่อ component CssBaseline.

Requirement: render CssBaseline ไว้บนสุดของ app

Lesson guide, Docs, Solution

L3 - Email input

สำหรับ email input ให้ใช้ TextField component เนื่องจากครอบคลุม parameters ต่างๆในการทำ input

Requirement: render TextField พร้อมทั้งใส่ props ที่เหมาะสมสำหรับ email input

Lesson guide, Docs, Solution

L4 - Password input

เพิ่ม password input

Requirement: render TextField พร้อมทั้งใส่ props ที่เหมาะสมสำหรับ password input

Lesson guide, Solution

L5 - Stack

จะเห็นว่าทั้งสอง input มันติดกันอยู่ เราจะมาจัด layout ให้ดูเป็นระเบียบ น่าใช้งานมากขึ้น ด้วย Stack component. มันจะสร้าง spacing ระหว่าง children ของมันตามที่เราต้องการ

Requirement: render Stack เหนือทั้งสอง fields และใส่ spacing ตามต้องการ

Lesson guide, Docs, Solution

L6 - sx prop

มาจัด layout ของ form ให้อยู่ตรงกลางของหน้าจอ. ใน Material UI เวลาเราต้องการเขียน CSS เพิ่ม ขั้นตอนแรกคือให้ใช้ sx prop. sx prop เป็นคุณสมบัติพิเศษใน Material UI ที่ช่วยให้คุณสามารถเพิ่มสไตล์แบบใช้ครั้งเดียวให้กับคอมโพเนนต์ได้อย่างรวดเร็ว โดย Material UI component ทุกตัวรองรับ sx prop. (ลองใส่ sx ให้กับ Stack)

ในกรณีนี้จะขอแนะนำ component อีกหนึ่งตัวซึ่งหน้าที่ของมันมีแค่ให้เราเขียน sx ได้เท่านั้น component นี้ชื่อ Box, มันจะ render div ออกมาให้ แต่เราสามารถเปลี่ยน element ให้กับมันได้

Requirement: ใช้ Box และ sx prop จัด layout ให้ได้แบบในรูป

Lesson guide, Docs, Solution

Tip: why marginTop is better than position fixed for making the form centered.

L7 - Checkbox

Requirement: เพิ่ม Remember me checkbox

Lesson guide, Docs, Solution

L8 - Sign up link

Requirement: เพิ่ม Sign up link โดยใช้ Typography และ Link components ตาม design

Lesson guide, Typography docs, Link docs, Solution

L9 - 3rd party icon

ต่อมาจะเป็นการนำ icon ทั่วๆไปมาใช้กับ Material UI ใน social login

Requirement: สร้าง component GoogleIcon และ FacebookIcon ด้วย svg ที่ให้ และนำไปใช้งานกับ Button เพื่อสร้าง social login buttons

Lesson guide, Button + icon demo, SvgIcon docs, Solution

L10 - Title

เพิ่มไตเติ้ล “Sign in” ด้วย Typography (h1)

Lesson guide, Solution

L11 - Theme

เราได้ login form ที่พร้อมใช้งานแล้ว ทีนี้เราจะมาปรับ design ให้มันดู minimal มากขึ้น มีความโค้งมนดูสบายตาด้วยการสร้าง theme โดยขั้นตอนแรกเราจะเปลี่ยน สีพื้นหลัง กันก่อน

Requirement: สร้าง file ใหม่ชื่อ AppTheme.tsx โดย export component ชื่อ AppTheme ที่ render ThemeProvider กับ children, จากนั้นสร้าง theme ด้วย createTheme โดยใช้สีพื้นหลังเป็น #f5f5f5

Lesson guide, Theming docs, Solution

ต้อง update Material UI เป็น 6.0.1 หรือมากกว่า

L12 - Theme font

Theme font ด้วย Inter. อย่าลืมว่าต้อง install font ด้วย เนื่องจาก Material UI ไม่ได้จัดการเรื่องการโหลด font ให้

Lesson guide, Theme font docs, Inter fontsource, Solution

L13 - Theme border radius

Requirement: ปรับค่าของ shape.borderRadius ให้เป็น 12

Lesson guide, Solution

L14 - Using theme values

Requirement: ปรับ Box sx prop ให้ใช้ค่า borderRadius จาก theme ด้วย callback

Lesson guide, Solution

L15 - Theme palette primary

Requirement: เลือกสีที่ชอบจาก Tailwind CSS color ใส่ใน palette.primary.main ของ theme

Lesson guide, Theme palette docs, Solution

L16 - Theme Button

หลังจากที่จัดการ theme tokens แล้ว เราสามารถที่จะทำ theme ให้กับ component ได้ด้วย เวลาเราเรียกใช้ component ก็จะมีสไตล์ตาม theme ที่เรากำหนดทันที

Requirement: เพิ่ม theme ให้กับ Button ที่มี variant=”contained” และ color=“primary”

Lesson guide, Docs, Solution

L17 - Theme Button (outlined)

Requirement: เพิ่ม theme ให้กับ Button ที่มี variant=”outlined” ให้มี border color ที่อ่อนลง

Lesson guide, Solution

L18 - Theme TextField

Theme TextField ให้มี border color ที่อ่อนลง โดยการใช้ CSS selector target ไปที่ fieldset

Lesson guide, Docs, Solution

L19 - Theme Checkbox

Theme checkbox ด้วยการแทนที่ icon และปรับให้มี border color ที่อ่อนลง

Lesson guide, Docs, Solution

L20 - Dark mode

เพิ่ม dark mode ให้กับเว็บ วิธีนี้จะทำให้เว็บเราปรับสีให้เข้ากับ system preference ที่ผู้ใช้งานตั้งค่าไว้, Debugging using Chrome devtool (emulate prefers-color-scheme)

Lesson guide, Docs, Solution

L21 - Apply dark styles

ปัญหาจะเกิดขึ้นที่ Box เนื่องจากยังไม่ได้รองรับ dark mode ให้แก้โดยการใช้ theme.applyStyles เมื่อต้องการเพิ่ม styles ในแต่ละ mode

Note: ต้อง update Material UI เป็น 6.0.2 หรือมากกว่า

Lesson guide, Solution

L22 - Color mode toggle

ในหลายๆเว็บไซต์จะมี control ให้ผู้ใช้งานสามารถปรับ mode ได้เอง ให้เพิ่ม Select โดยมี options คือ “System”, “Light”, “Dark” และใช้ useColorScheme hook ในการอ่านค่า mode, setMode

Lesson guide, Docs, Solution

L23 - CSS Variables

สามารถทำให้การพัฒนาเว็บไซต์ง่ายขึ้นด้วยการใช้ CSS variables ซึ่งปัจจุบันเป็นมาตราฐานของการทำเว็บไซต์ก็ว่าได้

Lesson solution, Docs, Solution

L24 - MUI Treasury

ใช้ predefined UI จาก MUI treasury. การพัฒนาเว็บไซต์จะเร็วขึ้นถ้าเราสามารถ copy โค้ดมาใช้งานในโปรเจคของเราได้

Requirement: เปลี่ยน ColorModeToggle ไปใช้ https://mui-treasury.com/?path=/story/color-scheme-select-icon--icon

Lesson guide, Solution

L25 - Breakpoints

เมื่อย่อหน้าจอไปที่ mobile viewport เราต้องการให้พื้นหลังของ Box นั้นหายไป ดังนั้นเราต้องใช้ media query เข้ามาช่วย ลองเขียน media query ตรงๆ แล้วค่อยขยับไปใช้ theme.breakpoints

Lesson guide, Docs, Solution