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

Можеме да не ги пишуваме објектите со стилови во датотеката со компонентата, како во претходната лекција, туку да создадеме одделна датотека со нашите објекти на стилови и да ги импортираме во потребната компонента.

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

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</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";

Сега можеме да го примениме потребниот објект со CSS стилови од заедничкиот објект styles на нашите тагови. Да ги примениме на првиот пасус стиловите од објектот class2:

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

На сличен начин да додадеме стилови од објектите на останатите тагови.

Како резултат, кодот на компонентата ќе изгледа на следниов начин:

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

Земете ја React компонентата која ја направивте во задачата од претходната лекција. Создадете одделна датотека styles.js, во која ќе има објекти на CSS стилови за вашите тагови, експортирајте ги како еден објект, применете ги стиловите на вашата React компонента.