React හි CSS modules සමඟ stylization ඉගෙනීම ආරම්භ කිරීම

මෙම සහ අනාගත පාඩම් වලදී, අපි තවත් නවීන හා ඵලදායී React components stylize කිරීමේ ප්‍රවේශයක් සලකා බලමු - CSS modules භාවිතය.

CSS modules මෙම ප්‍රවේශයේ දී - එය වෙනම compile කරන ලද CSS ගොනු වේ, එහි class හා animation නම් local scope එකක පවතින අතර එමඟින් විවිධ components වලින් class නම් සිදුවිය හැකි conflict වළක්වා ගනී.

ආරම්භ කිරීමට, අපගේ සරල React යෙදුම buttons සාදා අයින් කරමු. මේ සඳහා හිස් ෆෝල්ඩරයක් test සාදා එහි ඇතුල් වී terminal එකේ පහත commands ලියන්න:

npx create-react-app buttons
cd buttons
npm start

ඔබගේ React version එක අලුත් නම්, එනම් එය Create React App v2 සහ ඉහල versions සහාය දක්වනවා නම්, අමතර configuration කිරීම් කිසිවක් කිරීමට අවශ්‍ය නැත, මන්ද එවිට CSS modules ස්වයංක්‍රීයව support වේ. පරීක්ෂා කිරීම සඳහා package.json ගොනුව බලන්න, dependency එක react-scripts version 2.x.x හෝ ඉහල නම්, සියල්ල හොඳින් පවතී. නැතහොත් ඔබගේ React update කරන්න.

CSS modules ක්‍රමය භාවිතා කර stylize කිරීම සඳහා වන අපගේ යෙදුම බොත්තම් තුනක් අඩංගු වේ.

CSS ගොනු නම් කිරීමේදී, අපි convention එකට අනුකූලව පහත පරිදි නම් කරමු: [name].module.css.

දැන් අපි ෆෝල්ඩරය components src තුල සාදා, එයට ගොනුව Buttons.module.css අපගේ බොත්තම් සඳහා CSS styles සමඟ එකතු කරමු:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

එසේම ෆෝල්ඩරය components තුළ, සාදන්න හිස් React component ගොනුව Buttons.js, මේ සමයේදී generate කරන ලද ගොනුව App.js ස්පර්ශ නොකරන්න, අපි එය පසුව කාර්යයට ගනිමු!

Buttons.js තුළ අනිවාර්යයෙන්ම import කරන්න CSS styles සහිත ගොනුව, එමගින් මෙම styles එක් එක් බොත්තමට attribute එක භාවිතා කර යොදන්න class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

මාර්ගය වන විට, අනිවාර්ය නොවේ styles යන වචනය import කරන ලද styles object එකේ නම සඳහා භාවිතා කිරීම, ඔබට එය නම් කළ හැකිය, ඔබට පහසු ආකාරයට.

මීළඟ පාඩමේදී අපි අපගේ යෙදුම සම්පූර්ණ කරමු.

මෙම පාඩම සඳහා වන න්‍යාය අනුගමනය කරමින් generate කරන්න React යෙදුම inputs.

පාඩමේ දක්වා ඇති CSS modules ප්‍රවේශය භාවිතා කරන්න. inputs යෙදුමේ src ෆෝල්ඩරය තුළ ගොනුව Inputs.js සාදන්න React component එක සඳහා Inputs, එය අඩංගු වේ input fields තුනක්. inputs වලට Inputs.modules.css ගොනුවේ style කිහිපයක් ලියන්න. මෙම ගොනුව Inputs.js ගොනුවට import කරන්න සහ styles යොදන්න.