React'те өзүнчө файлдан атрибут style'га маалыматтарды киргизүү

Биз мурунку сабактагыдай компонент файлынын ичинде стиль объекттерин жазбай, өзүбүздүн стиль объекттерибиз менен өзүнчө файл түзүп, аларды керектүү компонентке импорттой алабыз.

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

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

src папкасынын ичинде өзүнчө styles.js файлын түзөлү, анда биздин стиль объекттерибизди жазалы:

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',
};

styles.js файлынын аягында биздин объекттерибизди styles деген бир объект катары экспорттоону унутпайлы:

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Эми styles объектин биздин компонентибизге импорттойлу:

import { styles } from "./styles";

Эми биз жалпы styles объектинен керектүү CSS стилдери бар объектибизди тегдерге колдонсо болот. Биринчи абзацка class2 объектинин стилдерин колдонолу:

<p style={styles.class2}>текст</p>

Ушул сыяктуу эле калган тегдерге объекттердин стилдерин кошобуз.

Натыйжада, компоненттин коду төмөнкүдөй көрүнөт:

function App() {
	return (
		<div style={styles.class1}>
			<p style={styles.class2}>текст</p>
			<p style={styles.class3}>текст</p>
			<p style={styles.class4}>текст</p>
		</div>
	);
}

Мурунку сабактын тапшырмасында жасаган React компонентиңизди алыңыз. Өзүнчө styles.js файлын түзүңүз, анда сиздин тегдер үчүн CSS стиль объекттери болсун, аларды бир объект катары экспорттоп, стилдерди React компонентиңизге колдонуңуз.