Kuingiza Data katika Sifa ya style Kutoka kwa Faili Tofauti katika React

Tunaweza usiandika vitu vilivyo na mitindo katika faili iliyo na kijenzi, kama tulivyofanya katika somo lilopita, bali unda faili tofauti iliyo na vitu vyetu vya mitindo na kuvitingiza katika kijenzi kinachohitajika.

Kwa hiyo, tuchukue kijenzi chetu bila mitindo ya CSS:

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

Wacha tuunde kwenye folda src faili tofauti styles.js, ambayo tutaandika vitu vyetu vilivyo na mitindo:

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

Usisahau chini ya faili styles.js kupeleka nje vitu vyetu kwa kutumia kitu kimoja styles:

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

Sasa tuingize kitu styles katika kijenzi chetu:

import { styles } from "./styles";

Sasa tunaweza kutumia kitu kinachohitajika kilicho na mitindo ya CSS kutoka kwa kitu cha jumla styles kwa vitambulisho vyetu. Tumia kwa aya ya kwanza mitindo kutoka kwa kitu class2:

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

Kwa njia sawa ongeza mitindo kutoka kwa vitu kwa vitambulisho vilivyobaki.

Kwa matokeo, msimbo wa kijenzi utakuwa umeonekana kama ifuatavyo:

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

Chukua kijenzi cha React ambacho umefanya katika kazi ya somo lilopita. Unda faili tofauti styles.js, ambayo itakuwa na vitu vya mitindo ya CSS kwa vitambulisho vyako, vitoa nje kama kitu kimoja, tumia mitindo kwa kijenzi chako cha React.