Sử dụng CSS toàn cục khi tạo kiểu trong React

Giả sử chúng ta có thành phần React App, trong đó có một div và bên trong div đó - ba đoạn văn:

function App() {
	return (
		<div>
			<p>văn bản</p>
			<p>văn bản</p>
			<p>văn bản</p>
		</div>
	);
}

Hãy tạo kiểu cho thành phần này. Để làm điều đó, trong cùng thư mục src với thành phần của chúng ta, hãy tạo một tệp CSS thông thường với các kiểu styles.css cho các thẻ của chúng ta.

Trong tệp này, hãy tạo một lớp class1 với các kiểu:

.class1 {
	width: 200px;
	border: 2px solid nâu;
	padding: 10px;
	text-align: center;
}

Bây giờ hãy thêm lớp class2 với các kiểu cho đoạn văn đầu tiên:

.class2 {
	color: cam đỏ;
	font-weight: đậm;
}

Lớp class3 với các kiểu cho đoạn văn thứ hai:

.class3 {
	font-style: nghiêng;
	color: nâu;
}

Và cuối cùng tạo lớp class4 cho đoạn văn cuối cùng:

.class4 {
	background-color: cam;
	font-weight: đậm;
	color: trắng;
}

Chúng ta đã hoàn thành với tệp CSS. Việc còn lại là áp dụng các kiểu CSS mà chúng ta đã viết cho các thẻ. Hãy quay trở lại tệp App.js của chúng ta với thành phần.

Điều đầu tiên chúng ta nhất định phải làm - thêm vào đầu tệp dòng nhập tệp kiểu của chúng ta styles.css:

import './styles.css';

Bây giờ, để áp dụng trong thành phần các lớp CSS từ tệp, hãy sử dụng thuộc tính class. Cho đoạn văn đầu tiên chúng ta có lớp class2, hãy áp dụng nó:

<p class="class2">văn bản</p>

Tương tự, hãy thêm các lớp cho các thẻ còn lại. Kết quả chúng ta sẽ nhận được mã sau:

<div class="class1">
	<p class="class2">văn bản</p>
	<p class="class3">văn bản</p>
	<p class="class4">văn bản</p>
</div>

Tạo một thành phần React sẽ chứa một div, và trong div đó sẽ có hai nút bấm. Tạo tệp styles.css với các kiểu CSS cho các thẻ của bạn. Áp dụng các kiểu đã viết vào các thẻ của thành phần.