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

CSS სტილების ელემენტებზე დამატება ასევე შესაძლებელია style ატრიბუტის მეშვეობით. ამ და რამდენიმე მომდევნო გაკვეთილში ჩვენ განვიხილავთ ინლაინული სტილიზაციის მეთოდებს.

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

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

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

მოდით ფაილში App.js ბრძანებამდე return შევქმნათ ობიექტი CSS სტილებით დივისთვის ცვლადში class1. გახსოვდეთ, რომ თვისებების სახელები აქ იწერება camelCase ნოტაციაში, ხოლო თვისებების მნიშვნელობები უნდა იყოს ჩასმული ბრჭყალებში:

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

ახლა დავამატოთ ობიექტი class2 სტილებით პირველი აბზაცისთვის:

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

ობიექტი class3 სტილებით მეორე აბზაცისთვის:

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

და ბოლოს class4 ბოლოსთვის:

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

ახლა, რომ კომპონენტში გამოვიყენოთ CSS კლასები, ვისარგებლოთ style ატრიბუტით. პირველი აბზაცისთვის ჩვენ გვქონდა ცვლადი class2, გადავცეთ ის მნიშვნელობის სახით:

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

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

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

function App() {
	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',
	};

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

აიღეთ React კომპონენტი, რომელიც თქვენ გააკეთეთ წინა გაკვეთილის ამოცანაში, შექმენით ობიექტები CSS სტილებით თქვენი თეგებისთვის, მიანიჭეთ ისინი შესაბამის style ატრიბუტებში.