CSS modules React සමග ශෛලීකරණය පිළිබඳ අධ්‍යයනය දිගටම කරගෙන යාම

අපගේ යෙදුම buttons මත වැඩ කිරීම දිගටම කරගෙන යමු. දැන් අපි ප්‍රධාන component App සමඟ කටයුතු කරමු, එය දැනටමත් මුලින්ම ගොනුව src තුළ ජනනය කර ඇත. එහි අපට divs දෙකක්, ශීර්ෂ පාඨයක් සහ බොත්තමක් ඇත.

ගොනුවේ නම App.css වෙනුවට App.module.css ලෙස සම්මුතියට අනුව වෙනස් කරන්න, එය හිස් කර එහි ටැග් සඳහා CSS විලාසයන් සහිත පන්ති කිහිපයක් සාදන්න:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

දැන් අපි ගොනුවේ අන්තර්ගතය හිස් කරමු App.js. ඉන්පසු React component Buttons සහ විලාසයන් App.module.css වෙතින් ආයාත කරන්න. අපගේ ටැග් ලියන්න සහ ඒවාට විලාසයන් යොදන්න, මෙන්ම React component Buttons ද ස්ථානගත කරන්න:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

විලාසයන් අඩංගු වස්තුවේ නම සඳහා අපි වචනය classes භාවිතා කළෙමු, එය අපි App.module.css වෙතින් ආයාත කරමු. පෙර අවස්ථාවේ මෙන්, මෙම වස්තුව ඔබට පහසු පරිදි නම් කළ හැකිය.

කුඩා පියවර කිහිපයක් ඉතිරිව ඇත. ගොනුවේ නම index.css සම්මුතියට අනුව වෙනස් කරන්න index.module.css ලෙස සහ ගොනුවේ index.js ආයාත පේළිය වෙනස් කිරීමට අමතක නොකරන්න:

import "./index.css";

මෙම පේළියට:

import "./index.module.css";

දැන් අපට බ්‍රවුසරයේ අපගේ යෙදුමේ කාර්යයේ ප්‍රතිඵලය දැක ගත හැකිය.

ඔබ ජනනය කරන ලද වර්ණනය බ්‍රවුසරයේ සංවර්ධක පුවරුවේ විවෘත කරන්නේ නම්, ඔබට පෙනෙනු ඇති එක් එක් component හි එහිම අනන්‍ය පන්ති ජනනය කර ඇති බව. මේ ආකාරයට, වෙනම components හි පන්ති අතර ඇතිවන ගැටුම් ගැන තවදුරටත් කරදර වීමට අපට අවශ්‍ය නොවේ.

තවත් වැදගත් කරුණක් නම්, CSS modules බාහිර සාමාන්‍ය CSS ගොනු ආයාත කිරීම තහනම් නොකරයි.

පාඩමෙන් ඇති න්‍යාය අනුගමනය කරමින්, ඔබගේ යෙදුමේ inputs, ඔබ කලින් පාඩමේ කාර්යයන්හිදී සෑදූ, React component App හිස් කරන්න, එහි ඔබ විසින් සාදන ලද Inputs, කිසියම් ශෛලීකරණය කරන ලද div එකක ස්ථානගත කරන්න. එකතු කරන්න App ශෛලීකරණය කළ ශීර්ෂ පාඨයක්. මේ සියල්ල තවත් කිසියම් div එකක තබන්න. React component App හි ටැග් සඳහා වන විලාසයන් App.modules.css හි ලියන්න.

සියල්ල එකට එකතු කරන්න, නිවැරදිව ඉතිරි ගොනු සම්බන්ධ කරන්න සහ ඔබේ යෙදුම inputs දියත් කරන්න.