Bắt đầu học tạo kiểu với CSS modules trong React

Trong bài học này và các bài học tiếp theo, chúng ta sẽ xem xét một cách tiếp cận hiện đại và hiệu quả khác để tạo kiểu cho các thành phần React - sử dụng CSS modules.

CSS modules trong cách tiếp cận này là các tệp CSS đã biên dịch riêng biệt, trong đó tên lớp và hoạt ảnh nằm trong phạm vi cục bộ, điều này cho phép tránh xung đột giữa các tên lớp từ các thành phần khác nhau.

Để bắt đầu, hãy tạo và chạy ứng dụng React nhỏ của chúng ta có tên buttons. Để làm điều đó, hãy tạo một thư mục trống test, đi vào đó và trong terminal viết các lệnh sau:

npx create-react-app buttons
cd buttons
npm start

Nếu bạn có phiên bản React mới, tức là nó hỗ trợ Create React App v2 trở lên, thì không cần phải thực hiện bất kỳ cấu hình bổ sung nào, vì trong trường hợp này CSS modules sẽ được hỗ trợ tự động. Để kiểm tra, hãy xem tệp package.json, nếu dependency react-scripts phiên bản 2.x.x trở lên, thì mọi thứ đều ổn. Nếu không, hãy cập nhật React của bạn.

Ứng dụng của chúng ta để tạo kiểu bằng cách CSS modules sẽ chứa ba nút bấm.

Chúng ta sẽ đặt tên cho các tệp CSS, tuân thủ quy ước, như sau: [name].module.css.

Bây giờ hãy tạo thư mục components trong src, và thêm vào đó tệp Buttons.module.css với các kiểu CSS cho các nút của chúng ta:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Đồng thời trong thư mục components, hãy tạo tệp thành phần React trống Buttons.js, trong khi đó đừng động vào tệp đã tạo App.js, chúng ta sẽ làm việc với nó sau!

Trong Buttons.js nhất định phải import tệp chứa các kiểu CSS, và cũng áp dụng các kiểu này cho mỗi nút bằng thuộc tính class:

import styles from "./Buttons.module.css";

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Nhân tiện, không nhất thiết phải sử dụng từ styles cho tên của đối tượng import chứa kiểu, bạn có thể đặt tên nó theo ý muốn.

Trong bài học tiếp theo, chúng ta sẽ hoàn thành ứng dụng của mình.

Làm theo lý thuyết của bài học này để tạo ra ứng dụng React có tên inputs.

Sử dụng cách tiếp cận CSS modules được trình bày trong bài học. Tạo trong src của ứng dụng inputs tệp Inputs.js cho thành phần React Inputs, nó sẽ chứa ba ô nhập liệu. Viết một vài kiểu trong Inputs.modules.css cho các ô nhập liệu. Import tệp này vào Inputs.js và áp dụng các kiểu.