Chèn dữ liệu vào thuộc tính style từ một tệp riêng biệt trong React

Chúng ta có thể không viết các đối tượng styles trong tệp component, như trong bài học trước, mà tạo một tệp riêng biệt chứa các đối tượng styles của chúng ta và import chúng vào component cần thiết.

Vậy, hãy lấy component của chúng ta không có CSS styles:

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

Hãy tạo trong thư mục src một tệp riêng biệt styles.js, trong đó chúng ta sẽ viết các đối tượng chứa styles của mình:

const class1 = {
	width: '200px',
	border: '2px solid brown',
	padding: '10px',
	textAlign: 'center',
};

const class2 = {
	color: 'orangered',
	fontWeight: 'bold',
};

const class3 = {
	fontStyle: 'italic',
	color: 'brown',
};

const class4 = {
	backgroundColor: 'orange',
	fontWeight: 'bold',
	color: 'white',
};

Đừng quên ở cuối tệp styles.js export các đối tượng của chúng ta dưới dạng một đối tượng styles:

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Bây giờ import đối tượng styles vào component của chúng ta:

import { styles } from "./styles";

Bây giờ chúng ta có thể áp dụng đối tượng CSS styles cần thiết từ đối tượng chung styles vào các thẻ của mình. Hãy áp dụng cho đoạn văn đầu tiên styles từ đối tượng class2:

<p style={styles.class2}>text</p>

Theo cách tương tự, hãy thêm styles từ các đối tượng còn lại cho các thẻ khác.

Kết quả, mã component sẽ trông như sau:

function App() {
	return (
		<div style={styles.class1}>
			<p style={styles.class2}>text</p>
			<p style={styles.class3}>text</p>
			<p style={styles.class4}>text</p>
		</div>
	);
}

Hãy lấy React component mà bạn đã làm trong bài tập của bài học trước. Tạo một tệp riêng biệt styles.js, trong đó sẽ chứa các đối tượng CSS styles cho các thẻ của bạn, export chúng dưới dạng một đối tượng, áp dụng styles vào React component của bạn.