CSS தொகுதிக்கூறுகளைப் பயன்படுத்தி எதிர்வினை கூறுகளை எவ்வாறு ஸ்டைல் ​​செய்வது

CSS தொகுதிகள் CSS வகுப்புப் பெயர்களை உள்நாட்டில் பயன்படுத்துவதற்கான வழியை வழங்குகிறது. நீங்கள் ஒரே வகுப்பின் பெயரைப் பயன்படுத்தும்போது பாணிகளை மீறுவது பற்றி நீங்கள் கவலைப்பட வேண்டியதில்லை.

CSS தொகுதிகள் எவ்வாறு செயல்படுகின்றன, அவற்றை நீங்கள் ஏன் பயன்படுத்த வேண்டும் மற்றும் ஒரு எதிர்வினை திட்டத்தில் அவற்றை எவ்வாறு செயல்படுத்துவது என்பதைக் கண்டறியவும்.

---

---

CSS தொகுதிகள் என்றால் என்ன?

தி CSS தொகுதிகள் ஆவணங்கள் CSS தொகுதியை CSS கோப்பாக விவரிக்கவும். வெவ்வேறு CSS கோப்புகளில் ஒரே பெயரில் CSS மாறிகளை நீங்கள் குறிப்பிடலாம்.

நீங்கள் சாதாரண வகுப்புகளைப் போலவே CSS தொகுதி வகுப்புகளையும் எழுதுகிறீர்கள். CSS ஐ உலாவிக்கு அனுப்பும் முன் கம்பைலர் தனித்துவமான வகுப்புப் பெயர்களை உருவாக்குகிறது.

எடுத்துக்காட்டாக, styles.modules.css எனப்படும் கோப்பில் பின்வரும் .btn வகுப்பைக் கவனியுங்கள்:

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

இந்தக் கோப்பைப் பயன்படுத்த, நீங்கள் அதை ஜாவாஸ்கிரிப்ட் கோப்பில் இறக்குமதி செய்ய வேண்டும்.

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 , பயன்பாட்டில் பயன்படுத்தப்படும் வண்ணங்களைக் கொண்டுள்ளது. நீங்கள் இந்த தொகுதியை மற்ற தொகுதிகளில் பயன்படுத்தலாம். எடுத்துக்காட்டாக, நிறங்கள்.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 இல் கிடைக்காத பரம்பரைக்கான ஆதரவு ஆகியவை அடங்கும். சாஸ் மூலம், உங்கள் பயன்பாட்டில் மிகவும் சிக்கலான அம்சங்களைச் சேர்க்கலாம்.