Inserarea datelor în atributul style dintr-un fișier separat în React

Putem să nu scriem obiectele cu stiluri în fișierul cu componenta, ca în lecția trecută, ci să creăm un fișier separat cu obiectele noastre de stiluri și să le importăm în componenta necesară.

Deci, să luăm componenta noastră fără stiluri CSS:

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

Să creăm în folderul src un fișier separat styles.js, în care să scriem obiectele noastre cu stiluri:

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

Să nu uităm în partea de jos a fișierului styles.js să exportăm obiectele noastre ca un singur obiect styles:

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

Acum să importăm obiectul styles în componenta noastră:

import { styles } from "./styles";

Acum putem aplica obiectul de care avem nevoie cu stiluri CSS din obiectul general styles la tag-urile noastre. Să aplicăm primului paragraf stilurile din obiectul class2:

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

În mod similar, să adăugăm stiluri din obiecte la tag-urile rămase.

Ca rezultat, codul componentei va arăta în felul următor:

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>
	);
}

Luați componenta React pe care ați făcut-o în sarcina din lecția trecută. Creați un fișier separat styles.js, în care vor fi obiecte cu stiluri CSS pentru tag-urile voastre, exportați-le ca un singur obiect, aplicați stilurile componentei voastre React.