მონაცემების ჩასმა style ატრიბუტში ცალკე ფაილიდან React-ში

ჩვენ არ უნდა დავწეროთ სტილების ობიექტები კომპონენტის ფაილში, როგორც ეს წინა გაკვეთილში გავაკეთეთ, არამედ შეგვიძლია შევქმნათ ცალკე ფაილი ჩვენი სტილების ობიექტებით და გადმოვიტანოთ ისინი საჭირო კომპონენტში.

ასე რომ, ავიღოთ ჩვენი კომპონენტი CSS სტილების გარეშე:

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

შევქმნათ src საქაღალდეში ცალკე ფაილი styles.js, რომელშიც ჩავწერთ ჩვენს სტილების ობიექტებს:

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',
};

არ დავივიწყოთ ფაილის styles.js ბოლოში ჩვენი ობიექტების ექსპორტი ერთი ობიექტის სახით styles:

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

ახლა გადმოვიტანოთ ობიექტი styles ჩვენს კომპონენტში:

import { styles } from "./styles";

ახლა ჩვენ შეგვიძლია გამოვიყენოთ ჩვენთვის საჭირო ობიექტი CSS სტილებით ზოგადი ობიექტიდან styles ჩვენს თეგებზე. გამოვიყენოთ პირველ აბზაცზე სტილები ობიექტიდან class2:

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

მსგავსი წესით დავუმატოთ სტილები დანარჩენ თეგებს სხვა ობიექტებიდან.

შედეგად, კომპონენტის კოდი ასე გამოიყურება:

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>
	);
}

აიღეთ React კომპონენტი, რომელიც თქვენ გააკეთეთ წინა გაკვეთილის ამოცანაში. შექმენით ცალკე ფაილი styles.js, რომელშიც იქნება თქვენი თეგების CSS სტილების ობიექტები, ექსპორტირება მოახდინეთ მათი როგორც ერთი ობიექტის, გამოიყენეთ სტილები თქვენს React კომპონენტზე.