Məlumatların React-də obyektdən style atributuna daxil edilməsi

CSS stilını elementlərə style atributu vasitəsilə də əlavə etmək olar. Bu və bir neçə növbəti dərsdə biz inline styling üsullarını nəzərdən keçirəcəyik.

İndi biz styles.css faylını birləşdirməyəcəyik, əvəzində uyğun dəyərləri hər bir teq üçün stil olan obyekt şəklində style atributuna ötürəcəyik, hansı ki, biz onu birbaşa komponent faylında yazacayıq.

Beləliklə, əvvəlki dərsdə etdiyimiz, CSS stilsiz olan komponentimizi götürək:

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

Gəlin App.js faylında return əmrindən əvvəl class1 dəyişənində div üçün CSS stili olan obyekti yaradaq. Xatırlayın ki, burada xassələrin adları camelCase qaydasında yazılır və xassələrin dəyərləri dırnaq içində olmalıdır:

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

İndi birinci abzas üçün stil olan class2 obyektini əlavə edək:

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

İkinci abzas üçün stil olan class3 obyekti:

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

Və nəhayət, sonuncu üçün class4:

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

İndi, komponentdə CSS siniflərini tətbiq etmək üçün, style atributundan istifadə edək. Birinci abzas üçün bizim class2 dəyişənimiz var idi, onu dəyər kimi ötürək:

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

Oxşar şəkildə, qalan teqlər üçün obyektlərdən stil əlavə edək.

Nəticədə, komponentin kodu aşağıdakı kimi görünəcək:

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

Əvvəlki dərsin tapşırığında etdiyiniz React komponentini götürün, teqləriniz üçün CSS stili olan obyektlər yaradın, onları uyğun style atributlarında təyin edin.