# Styling & CSS-in-JS (React / Next.js)

> CSS Modules, styled-components, Tailwind CSS, styles inline, theming

- 18 câu hỏi phỏng vấn
- Mid-Level
- [Câu hỏi phỏng vấn: React / Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van.md)

## 1. CSS Module trong React là gì?

**Câu trả lời**

CSS Modules tự động tạo tên class duy nhất bằng cách thêm hash vào tên class, giúp ngăn ngừa xung đột style giữa các component. Mỗi file CSS Module có scope cục bộ riêng, không giống như các stylesheet toàn cục truyền thống. Cách tiếp cận này cho phép viết các style module hóa mà không có nguy cơ ghi đè ngẫu nhiên trong các component khác.

## 2. Ưu điểm chính của styled-components là gì?

**Câu trả lời**

Styled-components cho phép viết CSS trực tiếp trong các file JavaScript bằng template literals, giúp dễ dàng tạo các style động dựa trên props của component. Cách tiếp cận này loại bỏ việc ánh xạ thủ công giữa các class CSS và component, và đảm bảo chỉ các style từ các component được mount mới được chèn vào trang. Việc đặt style cùng với logic component cũng cải thiện khả năng bảo trì code.

## 3. Làm thế nào để import CSS Module trong một component React?

**Câu trả lời**

Để import một CSS Module, hãy sử dụng cú pháp import JavaScript tiêu chuẩn với tên file kết thúc bằng .module.css, và gán kết quả cho một biến sẽ chứa một object với các tên class đã được chuyển đổi. Theo quy ước, biến này thường được đặt tên là 'styles'. Các class có thể được áp dụng thông qua thuộc tính className bằng ký hiệu object. Cách tiếp cận này đảm bảo rằng tên class là duy nhất và có phạm vi của component.

## Còn 15 câu hỏi nữa

- Đặc điểm chính của Tailwind CSS là gì?
- Nhược điểm chính của inline styles trong React là gì?

Đăng ký miễn phí: https://sharpskill.dev/vi/login

## Các chủ đề phỏng vấn React / Next.js khác

- [Nền tảng JavaScript](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/javascript-essentials.md): 25 câu hỏi, Junior
- [Nền tảng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-fundamentals.md): 20 câu hỏi, Junior
- [React Hooks](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-hooks.md): 22 câu hỏi, Junior
- [Vòng đời component](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/component-lifecycle.md): 18 câu hỏi, Junior
- [React Router](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-router.md): 20 câu hỏi, Junior
- [Quản lý state với Context](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/state-management-context.md): 18 câu hỏi, Junior
- [Biểu mẫu và Controlled Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/forms-controlled-components.md): 20 câu hỏi, Mid-Level
- [Lấy dữ liệu & API](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/fetching-data-api.md): 20 câu hỏi, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-query-tanstack.md): 20 câu hỏi, Mid-Level
- [Nền tảng Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-fundamentals.md): 25 câu hỏi, Mid-Level
- [TypeScript với React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/typescript-react.md): 20 câu hỏi, Mid-Level
- [Data Fetching trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-data-fetching.md): 24 câu hỏi, Mid-Level
- [Server Actions trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-server-actions.md): 20 câu hỏi, Mid-Level
- [Định tuyến & Điều hướng trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-routing-navigation.md): 22 câu hỏi, Mid-Level
- [API Routes trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-api-routes.md): 20 câu hỏi, Mid-Level
- [Metadata & SEO trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-metadata-seo.md): 18 câu hỏi, Mid-Level
- [Middleware & Auth trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-middleware-auth.md): 22 câu hỏi, Mid-Level
- [Kiểm thử React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-testing.md): 20 câu hỏi, Mid-Level
- [Zustand State Management](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/zustand-state-management.md): 18 câu hỏi, Mid-Level
- [Tối ưu hiệu năng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-performance-optimization.md): 22 câu hỏi, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-error-boundaries.md): 18 câu hỏi, Senior
- [Advanced React Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/advanced-react-patterns.md): 20 câu hỏi, Senior
- [Tính năng nâng cao của Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-advanced-features.md): 24 câu hỏi, Senior
- [Triển khai & Môi trường Production với Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-deployment-production.md): 20 câu hỏi, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-architecture-patterns.md): 22 câu hỏi, Senior
- [React Server Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-server-components.md): 26 câu hỏi, Senior
- [Quốc tế hóa Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-internationalization.md): 20 câu hỏi, Senior
- [React Bảo mật & Thực hành tốt nhất](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-security-best-practices.md): 22 câu hỏi, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/styling-css-in-js