Вметнување на податоци во атрибутот style од објект во React

CSS стилови на елементите може да се додадат и со помош на атрибутот style. Во ова и во неколку следни лекции ќе ги разгледаме начините за инлајна стилизација.

Сега нема да го поврзуваме фајлот styles.css, туку ќе ги пренесеме соодветните вредности во атрибутот style во вид на објект со стилови за секој таг, кои ќе ги пишуваме директно во фајлот на компонентата.

Значи, да ја земеме нашата компонента без CSS стилови, која ја правевме во претходната лекција:

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

Да пред командата return во фајлот App.js создадеме објект со 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.