Andmete sisestamine style atribuuti eraldi failist Reactis

Me ei pea kirjutama stiilide objekte komponendi failis, nagu eelmises õppetükis, vaid võime luua eraldi faili meie stiilide objektidega ja importida need vajalikku komponenti.

Niisiis, võtame oma komponendi ilma CSS stiilideta:

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

Loome kaustas src eraldi faili styles.js, milles kirjutame oma stiilide objektid:

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

Ärge unustage faili styles.js lõpus eksportida meie objektid ühe objektina styles:

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

Nüüd importime objekti styles meie komponenti:

import { styles } from "./styles";

Nüüd saame rakendada vajalikku objekti CSS stiilidega üldisest objektist styles meie siltidele. Rakendame esimesele lõigule stiilid objektist class2:

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

Samamoodi lisame stiilid objektidest ülejäänud siltidele.

Tulemusena näeb komponendi kood välja järgmine:

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

Võtke React komponent, mida te tegite eelmise õppetüki ülesandes. Looge eraldi fail styles.js, milles on CSS stiilide objektid teie siltide jaoks, eksportige need ühe objektina, rakendage stiilid teie React komponendile.