Reactте объекттен маалыматты style атрибутуна киргизүү

CSS стилдерин элементтерге style атрибуту аркылуу дагы кошсо болот. Бул жана кийинки бир нече сабактарда биз инлайн стилдештирүү ыкмаларын карап чыгабыз.

Эми биз styles.css файлын туташтырбай, тиешелүү маанилерди ар бир тег үчүн стилдер объектиси түрүндө style атрибутуна өткөрөбүз, аларды компоненттин файлына түз эле жазабыз.

Ошентип, биз өткөн сабакта жасаган, CSS стилдери жок компонентибизди алалы:

function App() {
	return (
		<div>
			<p>текст</p>
			<p>текст</p>
			<p>текст</p>
		</div>
	);
}

Келгиле, App.js файлында return буйругунан мурун class1 өзгөрмөсүндө див үчүн CSS стилдери менен объект түзөлү. Эсиңизде болсун, бул жердеги касиеттердин аталыштары 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}>текст</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}>текст</p>
			<p style={class3}>текст</p>
			<p style={class4}>текст</p>
		</div>
	);
}

Өткөн сабактагы тапшырмада жасаган React компонентиңизди алыңыз, тегдериңизге CSS стилдери менен объекттер түзүңүз, аларды тиешелүү style атрибуттарына коюңуз.