Деректерді React-тегі объекттен style атрибутына енгізу

CSS стильдерін элементтерге style атрибуты арқылы да қосуға болады. Бұл және болашақтағы бірнеше сабақта біз инлайн стильдеу әдістерін қарастырамыз.

Енді біз styles.css файлын қоспаймыз, bunun орнына әр тег үшін стильдер объектісін 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 атрибуттарына орнатыңыз.