React හි ශෛලීකරණයේදී ගෝලීය CSS භාවිතය

අපට React සංරචකයක් ඇතැයි සිතන්න App, එහි div එකක් ඇති අතර එහි ඇතුළත ඡේද තුනක්:

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

මෙම සංරචකය ශෛලීකරණය කරමු. මේ සඳහා, අපේ සංරචකය සමඟ ඇති එම බහාලුමේදීම src සාමාන්‍ය CSS ගොනුවක් සාදන්න styles.css අපගේ ටැග සඳහා විලාසිතා සමඟ.

මෙම ගොනුවේ div එක සඳහා පන්තියක් සාදන්න class1 විලාසිතා සමඟ:

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

දැන් පන්තිය එකතු කරන්න class2 සමඟ පළමු ඡේදය සඳහා විලාසිතා:

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

පන්තිය class3 සමඟ දෙවන ඡේදය සඳහා විලාසිතා:

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

අවසාන වශයෙන්, පන්තිය සාදන්න class4 සඳහා අවසාන ඡේදය:

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

CSS ගොනුව සමඟ අපි අවසන් කළෙමු. ඉතිරිව ඇත්තේ අප ලියා ඇති CSS විලාසිතා යොදන්න. ටැග සඳහා. අපේ ගොනුවට ආපසු යමු App.js සංරචකය සමඟ.

පළමුව අපි කළ යුත්තේ අනිවාර්යයෙන්ම ගොනුවේ ආරම්භයේදී ආයාත පේළිය එකතු කරන්න අපගේ විලාසිතා ගොනුව styles.css:

import './styles.css';

දැන්, සංරචකය තුළ යෙදීමට ගොනුවෙන් CSS පන්ති, අපි භාවිතා කරමු ගුණාංගය class. පළමු ඡේදය සඳහා අපට පන්තියක් තිබුණි class2, එය යොදමු:

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

ඒ හා සමාන ආකාරයකින් ඉතිරි සඳහා පන්ති එකතු කරන්න ටැග. ප්‍රතිඵලයක් වශයෙන් අපට ලැබෙනු ඇත පහත කේතය:

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

React සංරචකයක් සාදන්න, එය div එකක් අඩංගු වනු ඇති අතර div එකේ බොත්තම් දෙකක් ඇත. ගොනුව සාදන්න styles.css ඔබේ ටැග සඳහා CSS විලාසිතා සමඟ. යොදන්න ලියා ඇති විලාසිතා සංරචකයේ ටැග වෙත.