Matumizi ya CSS ya Ulimwenguni Wakati wa Kuandaa Mitindo katika React

Tukichukulia, tuna kipengele cha React App, ambacho kina div, na ndani ya div hiyo kuna aya tatu:

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

Wacha tuandae mitindo ya kipengele hiki. Kwa kusudi hili, katika folda ile ile src na kipengele chetu tutaunda faili ya kawaida ya CSS na mitindo styles.css kwa ajili ya vitambulisho vyetu.

Katika faili hii kwa div tutaunda darasa class1 lenye mitindo:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Sasa tuongeze darasa class2 lenye mitindo kwa aya ya kwanza:

.class2 {
	color: orangered;
	font-weight: bold;
}

Darasa class3 lenye mitindo kwa aya ya pili:

.class3 {
	font-style: italic;
	color: brown;
}

Na, mwishowe tuunde darasa class4 kwa aya ya mwisho:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

Tumemaliza na faili ya CSS. Imebakia kutumia mitindo yetu ya CSS ambayo tumeiandika kwa vitambulisho. Turudi kwenye faili yetu App.js lenye kipengele.

Jambo la kwanza ambalo lazima tufanye - kuongeza mstari wa kuagiza faili yetu ya mitindo styles.css mwanzoni mwa faili:

import './styles.css';

Sasa, ili kutumia katika kipengele madaras ya CSS kutoka kwa faili, tutatumia kipengele class. Kwa aya ya kwanza tulikuwa na darasa class2, tutumie:

<p class="class2">nakala</p>

Kwa namna ile ile tuongeze madarasa kwa vitambulisho vilivyobaki. Kwa matokeo tutapata msimbo ufuatao:

<div class="class1">
	<p class="class2">nakala</p>
	<p class="class3">nakala</p>
	<p class="class4">nakala</p>
</div>

Unda kipengele cha React, ambacho kitakuwa na div, na ndani ya div kutakuwa na vibofyo viwili. Unda faili styles.css na mitindo ya CSS kwa vitambulisho vyako. Tumia mitindo iliyoandikwa kwa vitambulisho vya kipengele.