Tạo kiểu với Styled Components trong React

Trong các bài học trước, chúng ta đã xem xét các kỹ thuật tạo kiểu bằng cách sử dụng CSS toàn cục và tạo kiểu nội tuyến. Trong bài học này, chúng ta sẽ làm việc với một phương pháp hiệu quả hơn cho các ứng dụng lớn - sử dụng thư viện styled-components.

Vì vậy, hãy lấy component của chúng ta không có kiểu CSS, mà chúng ta đã sử dụng trong các bài học trước:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Để bắt đầu, hãy cài đặt thư viện Styled Components:

npm install --save styled-components

Sau đó, hãy nhập gói cần thiết vào component App:

import styled from 'styled-components';

Bây giờ chúng ta có thể bọc các thẻ trong kiểu và sử dụng chúng như các component React, nhưng với các kiểu được đính kèm trực tiếp trong JS. Phương pháp này còn được gọi là CSS trong JS.

Hãy tạo kiểu cho đoạn văn đầu tiên. Để làm điều này, trước hàm App, sau các dòng nhập, hãy tạo component Text1. Trong đối tượng styled từ thư viện, chúng ta cần một đoạn văn, vì vậy chúng ta viết styled.p. Sau đó, trong chuỗi mẫu, liệt kê các kiểu CSS cần thiết cho chúng ta - giống như trong CSS thông thường:

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

Như bạn thấy, chúng ta sử dụng CSS thuần túy ở đây dưới dạng chuỗi mẫu, điều này rất thuận tiện. Tương tự, chúng ta có thể sử dụng truy vấn phương tiện, phần tử giả, bộ chọn và các chức năng khác của CSS.

Bây giờ bên trong hàm của component App, hãy thay thế thẻ p bằng component mà chúng ta đã tạo Text1 với các kiểu CSS:

<Text1>text</Text1>

Tương tự, hãy tạo kiểu cho đoạn văn thứ hai và thứ ba. Để làm điều này, hãy tạo các component Text2 và Text3:

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

Và cuối cùng, hãy tạo kiểu cho div của chúng ta. Để làm điều này, hãy tạo một component và đặt tên nó là Container:

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

Hãy thay thế tất cả các thẻ của chúng ta bằng các component đã tạo:

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

Nhờ cách tiếp cận này, có thể tạo ra các component có thể tái sử dụng nhiều lần với các kiểu.

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

Tương tự, có thể tạo kiểu cho các component, sử dụng, ví dụ, thư viện Emotion.

Hãy lấy component React mà bạn đã làm trong bài tập của bài học trước, tạo kiểu cho nó, sử dụng thư viện Styled Components.