Chèn dữ liệu vào thuộc tính style từ biến trong React

Ở bài học trước, chúng ta viết đối tượng trực tiếp trong thuộc tính style. Chúng ta cũng có thể sử dụng việc chèn dữ liệu vào đối tượng này từ các biến.

Hãy lấy component React của chúng ta không có CSS styles:

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

Bây giờ chúng ta sẽ tạo các biến và gán cho chúng giá trị của các thuộc tính CSS. Hãy bắt đầu lần lượt với styles cho div.

Trong file component, trước lệnh return, hãy tạo biến wd1 và gán cho nó giá trị '200px':

const wd1 = '200px';

Tương tự, hãy tạo các biến cho tất cả giá trị thuộc tính của div chúng ta:

const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Bây giờ hãy thêm các biến cho đoạn văn đầu tiên:

const co1 = 'orangered';
const fw1 = 'bold';

Cho đoạn văn thứ hai:

const fs1 = 'italic';
const co2 = 'brown';

Và cuối cùng, cho đoạn cuối cùng. Ở đây chỉ cần hai, không phải ba biến. Không có lý do gì để lặp lại, vì giá trị bold chúng ta đã có cho đoạn văn đầu tiên:

const bco1 = 'orange';
const co3 = 'white';

Và bây giờ chúng ta sẽ thay thế các biến với giá trị styles. Hãy, làm điều này cho đoạn văn đầu tiên. Chèn các biến co1 và fw1 thay cho các giá trị trong đối tượng:

<p style = {{ color: co1, fontWeight: fw1 }}>
	văn bản
</p>

Tương tự, hãy làm với các thẻ còn lại.

Kết quả là code component của chúng ta sẽ trông như thế này:

function App() {
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

	const co1 = 'orangered';
	const fw1 = 'bold';

	const fs1 = 'italic';
	const co2 = 'brown';
	
	const bco1 = 'orange';
	const co3 = 'white';

	return (
		<div style = {{
			width: wd1,
			border: br1,
			padding: pd1,
			textAlign: ta1 }}>
			<p style = {{ color: co1, fontWeight: fw1 }}>
				văn bản
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				văn bản
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				văn bản
			</p>
		</div>
	);
}

Hãy sửa đổi code giải pháp cho bài toán ở bài học trước sao cho các giá trị thuộc tính CSS được lưu trữ trong các biến.