CSS మాడ్యూల్‌లను ఉపయోగించి రియాక్ట్ కాంపోనెంట్‌లను ఎలా స్టైల్ చేయాలి

CSS మాడ్యూల్‌లను ఉపయోగించి రియాక్ట్ కాంపోనెంట్‌లను ఎలా స్టైల్ చేయాలి

CSS మాడ్యూల్‌లు CSS తరగతి పేర్లను స్థానికంగా స్కోప్ చేయడానికి ఒక మార్గాన్ని అందిస్తాయి. మీరు ఒకే తరగతి పేరును ఉపయోగించినప్పుడు శైలులను భర్తీ చేయడం గురించి మీరు చింతించాల్సిన అవసరం లేదు.





CSS మాడ్యూల్స్ ఎలా పని చేస్తాయి, మీరు వాటిని ఎందుకు ఉపయోగించాలి మరియు వాటిని రియాక్ట్ ప్రాజెక్ట్‌లో ఎలా అమలు చేయాలి అనే విషయాలను కనుగొనండి.





CSS మాడ్యూల్స్ అంటే ఏమిటి?

ది CSS మాడ్యూల్స్ డాక్స్ CSS మాడ్యూల్‌ని CSS ఫైల్‌గా వివరించండి, దీని తరగతి పేర్లు స్థానికంగా డిఫాల్ట్‌గా స్కోప్ చేయబడతాయి. దీనర్థం మీరు వేర్వేరు CSS ఫైల్‌లలో ఒకే పేరుతో CSS వేరియబుల్‌లను పరిష్కరించవచ్చు.





మీరు సాధారణ తరగతుల మాదిరిగానే CSS మాడ్యూల్ తరగతులను వ్రాస్తారు. అప్పుడు కంపైలర్ CSSని బ్రౌజర్‌కి పంపే ముందు ప్రత్యేకమైన తరగతి పేర్లను రూపొందిస్తుంది.

ఉదాహరణకు, styles.modules.css అనే ఫైల్‌లో కింది .btn తరగతిని పరిగణించండి:



.btn { 
width: 90px;
height: 40px;
padding: 10px 20px;
}

ఈ ఫైల్‌ని ఉపయోగించడానికి, మీరు దీన్ని JavaScript ఫైల్‌లోకి దిగుమతి చేసుకోవాలి.

import styles from "./styles.module.js" 

ఇప్పుడు, .btn తరగతిని సూచించడానికి మరియు దానిని మూలకంలో అందుబాటులో ఉంచడానికి, మీరు క్రింద చూపిన విధంగా తరగతిని ఉపయోగిస్తారు:





class="styles.btn" 

బిల్డ్ ప్రాసెస్ CSS క్లాస్‌ని ఫార్మాట్ యొక్క ప్రత్యేక పేరుతో భర్తీ చేస్తుంది _styles__btn_118346908.

తరగతి పేర్ల యొక్క ప్రత్యేకత ఏమిటంటే, మీరు వేర్వేరు భాగాలకు ఒకే తరగతి పేరును ఉపయోగించినప్పటికీ, అవి ఢీకొనవు. మీరు ఒక కాంపోనెంట్ యొక్క CSS స్టైల్‌లను ఆ కాంపోనెంట్‌కు నిర్దిష్టంగా ఒకే ఫైల్‌లో స్టోర్ చేయగలరు కాబట్టి మీరు ఎక్కువ కోడ్ స్వాతంత్ర్యానికి హామీ ఇవ్వవచ్చు.





ఇది డీబగ్గింగ్‌ను సులభతరం చేస్తుంది, ప్రత్యేకించి మీరు బహుళ స్టైల్‌షీట్‌లతో పని చేస్తుంటే. మీరు నిర్దిష్ట భాగం కోసం CSS మాడ్యూల్‌ను మాత్రమే ట్రాక్ చేయాలి.

CSS మాడ్యూల్స్ ద్వారా బహుళ తరగతులను కలపడానికి కూడా మిమ్మల్ని అనుమతిస్తాయి కంపోజ్ చేస్తుంది కీవర్డ్. ఉదాహరణకు, పైన ఉన్న క్రింది .btn తరగతిని పరిగణించండి. మీరు కంపోజ్‌లను ఉపయోగించి ఇతర తరగతులలో ఆ తరగతిని 'పొడిగించవచ్చు'.

సమర్పించు బటన్ కోసం, మీరు వీటిని కలిగి ఉండవచ్చు:

.btn { 
/* styles */
}

.submit {
composes: btn;
background-color: green;
color:#FFFFFF
}

ఇది .btn మరియు .submit తరగతులను మిళితం చేస్తుంది. మీరు ఇలాంటి మరొక CSS మాడ్యూల్ నుండి శైలులను కూడా కంపోజ్ చేయవచ్చు:

.submit { 
composes:primary from "./colors.css"
background-color: green;
}

మీరు ఇతర నియమాల కంటే ముందుగా కంపోజ్ నియమాన్ని తప్పనిసరిగా వ్రాయాలని గుర్తుంచుకోండి.

రియాక్ట్‌లో CSS మాడ్యూళ్లను ఎలా ఉపయోగించాలి

మీరు రియాక్ట్‌లో CSS మాడ్యూల్‌లను ఎలా ఉపయోగిస్తారో మీరు రియాక్ట్ అప్లికేషన్‌ను ఎలా క్రియేట్ చేస్తారు అనే దానిపై ఆధారపడి ఉంటుంది.

మీరు create-react-appని ఉపయోగిస్తే, CSS మాడ్యూల్స్ బాక్స్ వెలుపల సెటప్ చేయబడతాయి. అయితే, మీరు మొదటి నుండి అప్లికేషన్‌ను సృష్టించబోతున్నట్లయితే, మీరు వెబ్‌ప్యాక్ వంటి కంపైలర్‌తో CSS మాడ్యూల్‌లను కాన్ఫిగర్ చేయాలి.

ల్యాప్‌టాప్‌లో గ్రాఫిక్స్‌ను ఎలా మెరుగుపరచాలి

ఈ ట్యుటోరియల్‌తో పాటు అనుసరించడానికి, మీరు వీటిని కలిగి ఉండాలి:

  • మీ మెషీన్‌లో నోడ్ ఇన్‌స్టాల్ చేయబడింది.
  • ES6 మాడ్యూల్స్ యొక్క ప్రాథమిక అవగాహన.
  • ఒక ప్రాథమిక ప్రతిచర్య యొక్క అవగాహన .

రియాక్ట్ అప్లికేషన్‌ను సృష్టిస్తోంది

విషయాలు సరళంగా ఉంచడానికి, మీరు ఉపయోగించవచ్చు క్రియేట్-రియాక్ట్-యాప్ రియాక్ట్ యాప్‌ను పరంజా చేయడానికి.

ఈ ఆదేశాన్ని అమలు చేయండి కొత్త రియాక్ట్ ప్రాజెక్ట్‌ను సృష్టించండి react-css-modules అంటారు:

npx create-react-app react-css-modules 

ఇది రియాక్ట్‌తో ప్రారంభించడానికి అవసరమైన అన్ని డిపెండెన్సీలతో react-css-modules అనే కొత్త ఫైల్‌ను రూపొందిస్తుంది.

బటన్ కాంపోనెంట్‌ను సృష్టిస్తోంది

మీరు ఈ దశలో బటన్ భాగం మరియు Button.module.css అనే CSS మాడ్యూల్‌ను సృష్టిస్తారు. src ఫోల్డర్‌లో, భాగాలు అనే కొత్త ఫోల్డర్‌ను సృష్టించండి. ఆ ఫోల్డర్‌లో బటన్ అనే మరో ఫోల్డర్‌ని క్రియేట్ చేయండి. మీరు ఈ ఫోల్డర్‌లో బటన్ భాగం మరియు దాని శైలులను జోడిస్తారు.

నావిగేట్ చేయండి src/భాగాలు/బటన్ మరియు Button.jsని సృష్టించండి.

export default function Button() { 
return (
<button>Submit</button>
)
}

తర్వాత, Button.module.css అనే కొత్త ఫైల్‌ని సృష్టించి, కింది వాటిని జోడించండి.

.btn { 
width: 90px;
height: 40px;
padding: 10px 20px;
border-radius: 4px;
border: none;
}

బటన్ కాంపోనెంట్‌లో ఈ క్లాస్‌ని ఉపయోగించడానికి, దీన్ని స్టైల్స్‌గా దిగుమతి చేయండి మరియు బటన్ ఎలిమెంట్ యొక్క క్లాస్ పేరులో ఇలా సూచించండి:

import styles from "./Button.module.css" 

export default function Button() {
return (
<button className={styles.btn}>Submit</button>
)
}

ఒకే తరగతిని ఎలా ఉపయోగించాలో చూపే సాధారణ ఉదాహరణ ఇది. మీరు విభిన్న భాగాలలో శైలులను భాగస్వామ్యం చేయాలనుకోవచ్చు లేదా తరగతులను కలపవచ్చు. దీని కోసం, మీరు ఈ కథనంలో గతంలో పేర్కొన్న విధంగా కంపోజ్ కీవర్డ్‌ని ఉపయోగించవచ్చు.

కూర్పును ఉపయోగించడం

ముందుగా, కింది కోడ్‌తో బటన్ కాంపోనెంట్‌ను సవరించండి.

import styles from "./Button.module.css" 

export default function Button({type="primary", label="Button"}) {
return (
<button className={styles[type]}>{label}</button>
)
}

ఈ కోడ్ టైప్ విలువను ప్రాప్‌గా అంగీకరించడం ద్వారా బటన్ కాంపోనెంట్‌ను మరింత డైనమిక్‌గా చేస్తుంది. ఈ రకం బటన్ మూలకానికి వర్తించే తరగతి పేరును నిర్ణయిస్తుంది. కాబట్టి బటన్ సమర్పించు బటన్ అయితే, తరగతి పేరు “సమర్పించు” అవుతుంది. ఇది 'ఎర్రర్' అయితే, క్లాస్ పేరు 'ఎర్రర్', మరియు మొదలైనవి.

కంపోజ్‌ల కీవర్డ్‌ని ఉపయోగించుకోవడానికి, ప్రతి బటన్‌కు మొదటి నుండి అన్ని స్టైల్‌లను వ్రాయడానికి బదులుగా ఈ క్రింది వాటిని Button.module.cssకి జోడించండి.

.btn { 
width: 90px;
height: 40px;
padding: 10px 20px;
border-radius: 4px;
border: none;
}

.primary {
composes: btn;
color: #FFFFFF;
background-color: #6E41E2;
}

.secondary {
composes: btn;
color: #6E41E2;
background-color: #FFFFFF;
}

ఈ ఉదాహరణలో, ప్రాథమిక తరగతి మరియు ద్వితీయ తరగతి btn తరగతిని ఉపయోగిస్తాయి. ఇలా చేయడం ద్వారా, మీరు వ్రాయవలసిన కోడ్ మొత్తాన్ని తగ్గిస్తుంది.

బాహ్య CSS మాడ్యూల్‌తో మీరు దీన్ని మరింత ముందుకు తీసుకెళ్లవచ్చు color.module.css , అప్లికేషన్‌లో ఉపయోగించిన రంగులను కలిగి ఉంటుంది. మీరు ఈ మాడ్యూల్‌ని ఇతర మాడ్యూల్స్‌లో ఉపయోగించవచ్చు. ఉదాహరణకు, ఈ క్రింది కోడ్‌తో కాంపోనెంట్స్ ఫోల్డర్ యొక్క రూట్‌లో color.module.css ఫైల్‌ను సృష్టించండి:

.primaryBg { 
background-color: #6E41E2
}
.secondaryBg {
background-color: #FFFFFF
}

.primaryColor {
color: #FFFFFF
}
.secondaryColor {
color: #6E41E2
}

ఇప్పుడు Button/Button.module.css ఫైల్‌లో, పై తరగతులను ఇలా ఉపయోగించడానికి ప్రాథమిక మరియు ద్వితీయ తరగతులను సవరించండి:

.primary { 
composes: btn;
composes: primaryColor from "../colors.module.css";
composes: primaryBg from "../colors.module.css";
}

.secondary {
composes: btn;
composes: secondaryColor from "../colors.module.css";
composes: secondaryBg from "../colors.module.css";
}

CSS మాడ్యూళ్ళతో సాస్

మీ కోడ్‌బేస్ యొక్క మాడ్యులారిటీని మెరుగుపరచడానికి మీరు CSS మాడ్యూల్‌లను ఉపయోగించవచ్చు. ఉదాహరణగా, మీరు బటన్ కాంపోనెంట్ కోసం సాధారణ CSS క్లాస్‌ని సృష్టించవచ్చు మరియు కూర్పు ద్వారా CSS తరగతులను మళ్లీ ఉపయోగించుకోవచ్చు.

మీ CSS మాడ్యూళ్ల వినియోగాన్ని శక్తివంతం చేయడానికి, Sassని ఉపయోగించండి. Sass—Syntactically Awesome Style Sheets—ఒక టన్ను లక్షణాలను అందించే CSS ప్రీప్రాసెసర్. అవి CSSలో అందుబాటులో లేని గూడు, వేరియబుల్స్ మరియు వారసత్వం కోసం మద్దతును కలిగి ఉంటాయి. సాస్‌తో, మీరు మీ అప్లికేషన్‌కు మరింత సంక్లిష్టమైన ఫీచర్‌లను జోడించవచ్చు.