Styling & CSS-in-JS
CSS Modules, styled-components, Tailwind CSS, inline styles, การจัดธีม
1CSS Module ใน React คืออะไร?
CSS Module ใน React คืออะไร?
คำตอบ
CSS Modules สร้างชื่อคลาสที่ไม่ซ้ำกันโดยอัตโนมัติด้วยการเพิ่ม hash ลงในชื่อคลาส ซึ่งช่วยป้องกันความขัดแย้งของสไตล์ระหว่างคอมโพเนนต์ แต่ละไฟล์ CSS Module มี scope ท้องถิ่นของตัวเอง ต่างจาก stylesheet แบบ global ดั้งเดิม วิธีนี้ช่วยให้เขียนสไตล์แบบ modular ได้โดยไม่มีความเสี่ยงที่จะถูกเขียนทับโดยไม่ตั้งใจในคอมโพเนนต์อื่น
2ข้อดีหลักของ styled-components คืออะไร?
ข้อดีหลักของ styled-components คืออะไร?
คำตอบ
Styled-components ช่วยให้เขียน CSS ได้โดยตรงในไฟล์ JavaScript โดยใช้ template literals ซึ่งช่วยให้สร้างสไตล์ dynamic ตาม props ของคอมโพเนนต์ได้ง่ายขึ้น วิธีนี้ขจัดการ mapping ด้วยตนเองระหว่าง CSS class กับคอมโพเนนต์ และรับประกันว่าจะมีเพียงสไตล์จากคอมโพเนนต์ที่ mount แล้วเท่านั้นที่จะถูกแทรกเข้าไปในหน้า การวางสไตล์ไว้ใกล้กับ logic ของคอมโพเนนต์ยังช่วยปรับปรุงการบำรุงรักษาโค้ดอีกด้วย
3จะ import CSS Module ในคอมโพเนนต์ React ได้อย่างไร?
จะ import CSS Module ในคอมโพเนนต์ React ได้อย่างไร?
คำตอบ
ในการ import CSS Module ให้ใช้ syntax การ import JavaScript มาตรฐานพร้อมชื่อไฟล์ที่ลงท้ายด้วย .module.css แล้วกำหนดผลลัพธ์ให้กับตัวแปรที่จะเก็บ object ที่มีชื่อคลาสที่ถูกแปลงแล้ว ตามแบบแผน ตัวแปรนี้มักเรียกว่า 'styles' จากนั้นสามารถใช้คลาสผ่าน attribute className โดยใช้ object notation วิธีนี้รับประกันว่าชื่อคลาสมีความเป็นเอกลักษณ์และมีขอบเขตอยู่ในคอมโพเนนต์
คุณลักษณะหลักของ Tailwind CSS คืออะไร?
ข้อเสียหลักของ inline styles ใน React คืออะไร?
+15 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี