Tiếp tục tìm hiểu cách tạo kiểu với CSS modules React

Hãy tiếp tục làm việc trên ứng dụng buttons của chúng ta. Bây giờ hãy tập trung vào thành phần chính App, vốn đã được tạo sẵn trong thư mục src. Trong đó chúng ta sẽ có hai thẻ div, một tiêu đề và một nút bấm.

Hãy đổi tên tệp App.css thành App.module.css theo quy ước, xóa sạch nội dung của nó và tạo ra một vài lớp CSS với các kiểu cho các thẻ:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Và bây giờ hãy xóa nội dung của tệp App.js. Sau đó nhập khẩu thành phần React Buttons và các kiểu từ App.module.css. Hãy viết các thẻ của chúng ta và áp dụng các kiểu cho chúng, đồng thời đặt thành phần React Buttons vào:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Chúng ta đã sử dụng từ classes cho tên đối tượng chứa các kiểu, mà chúng ta nhập khẩu từ App.module.css. Giống như trường hợp trước, bạn có thể đặt tên cho đối tượng này theo ý muốn của bạn.

Còn lại một vài bước nhỏ nữa. Hãy đổi tên tệp index.css theo quy ước thành index.module.css và trong tệp index.js đừng quên thay thế dòng nhập khẩu:

import "./index.css";

Bằng dòng:

import "./index.module.css";

Bây giờ chúng ta có thể thấy trong trình duyệt kết quả làm việc của ứng dụng của chúng ta.

Nếu bạn mở mã HTML được tạo ra trong bảng điều khiển nhà phát triển của trình duyệt, bạn sẽ thấy rằng mỗi thành phần đều có các lớp duy nhất của riêng nó. Do đó, chúng ta không cần phải lo lắng nữa về việc xung đột giữa các lớp của các thành phần riêng biệt.

Điều quan trọng nữa là CSS modules không cấm việc nhập khẩu cả các tệp CSS bên ngoài thông thường.

Theo lý thuyết từ bài học, hãy xóa sạch thành phần React App trong ứng dụng inputs của bạn, mà bạn đã tạo trong các nhiệm vụ của bài học trước, đồng thời đặt trong đó, thành phần Inputs mà bạn đã tạo vào một thẻ div có tạo kiểu nào đó. Thêm vào App một tiêu đề đã được tạo kiểu. Tất cả những thứ này hãy đặt vào trong một thẻ div khác. Các kiểu cho các thẻ của thành phần React App hãy viết trong App.modules.css.

Hãy tập hợp tất cả lại với nhau, kết nối chính xác các tệp còn lại và khởi chạy ứng dụng của bạn inputs.