தையல்களுடன் ரியாக்ட் அப்ளிகேஷன் ஸ்டைலிங்

தையல் என்பது ஒரு நவீன CSS-in-JS நூலகமாகும், இது உங்கள் ரியாக்ட் அப்ளிகேஷன்களை ஸ்டைல் ​​செய்ய சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகிறது. இது CSS மற்றும் ஜாவாஸ்கிரிப்ட்டின் சிறந்த பகுதிகளை இணைக்கும் ஸ்டைலிங்கிற்கான தனித்துவமான அணுகுமுறையை வழங்குகிறது, இது டைனமிக் பாணிகளை எளிதாக உருவாக்க உங்களை அனுமதிக்கிறது.

அன்றைய MUO வீடியோ உள்ளடக்கத்துடன் தொடர உருட்டவும்

தையல்களை அமைத்தல்

உங்கள் ரியாக்ட் பயன்பாட்டைப் பயன்படுத்தி ஸ்டைலிங் செய்தல் தையல் போன்றது பாணி-கூறுகள் நூலகத்தைப் பயன்படுத்துதல் . தையல் மற்றும் பாணி-கூறுகள் CSS-in-JS நூலகங்கள் இரண்டும் ஜாவாஸ்கிரிப்ட்டில் ஸ்டைல்களை எழுத அனுமதிக்கும்.

---

---

மிகவும் பிரபலமான பயன்பாடு என்ன

உங்கள் ரியாக்ட் அப்ளிகேஷனை வடிவமைக்கும் முன், நீங்கள் தையல் நூலகத்தை நிறுவி அமைக்க வேண்டும். npm ஐப் பயன்படுத்தி நூலகத்தை நிறுவ, உங்கள் முனையத்தில் பின்வரும் கட்டளையை இயக்கவும்:

npm install @stitches/react 

மாற்றாக, இந்த கட்டளையுடன் நூலைப் பயன்படுத்தி நூலகத்தை நிறுவலாம்:

yarn add @stitches/react 

தையல் நூலகத்தை நிறுவியவுடன், உங்கள் ரியாக்ட் அப்ளிகேஷனை ஸ்டைலிங் செய்யத் தொடங்கலாம்.

பாணியிலான கூறுகளை உருவாக்குதல்

பாணியிலான கூறுகளை உருவாக்க, தையல் நூலகம் வழங்குகிறது a பாணியில் செயல்பாடு. பாணியிலான செயல்பாடு CSS பாணிகள் மற்றும் கூறுகளின் தர்க்கத்தை இணைக்கும் பாணியிலான கூறுகளை உருவாக்க உங்களை அனுமதிக்கிறது.

தி பாணியில் செயல்பாடு இரண்டு வாதங்களை எடுக்கும். முதல் ஒரு HTML/JSX உறுப்பு, மற்றும் இரண்டாவது அதை பாணி CSS பண்புகளை கொண்ட ஒரு பொருள்.

---

---

இதைப் பயன்படுத்தி ஸ்டைல் ​​செய்யப்பட்ட பொத்தான் கூறுகளை எவ்வாறு உருவாக்கலாம் என்பது இங்கே பாணியில் செயல்பாடு:

import { styled } from "@stitches/react"; 
 
export const Button = styled("button", { 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  backgroundColor: "#333333", 
  color: "#e2e2e2", 
  fontFamily: "cursive", 
  border: "none", 
}); 

மேலே உள்ள குறியீடு தொகுதி a ஐ உருவாக்குகிறது பொத்தானை அடர் பின்னணி நிறம், சாம்பல் நிற உரை நிறம், பார்டர் ஆரம் மற்றும் சில திணிப்பு கொண்ட கூறு. நீங்கள் CSS பண்புகளை கேமல்கேஸில் எழுதுகிறீர்கள், கபாப்-கேஸில் அல்ல என்பதை நினைவில் கொள்ளவும். ஏனெனில் கேமல்கேஸ் என்பது ஜாவாஸ்கிரிப்ட்டில் CSS பண்புகளை எழுதுவதற்கான பொதுவான வழியாகும்.

---

---

ஸ்டைல் ​​செய்யப்பட்ட பொத்தான் கூறுகளை நீங்கள் உருவாக்கியதும், அதை உங்கள் எதிர்வினை கூறுகளில் இறக்குமதி செய்து பயன்படுத்தலாம்.

உதாரணத்திற்கு:

import React from "react"; 
import { Button } from "./Button"; 
 
function App() { 
  return ( 
    <> 
      <Button>Click Me</Button> 
    </> 
  ); 
} 
 
export default App; 

இந்த உதாரணம் பயன்படுத்துகிறது பொத்தானை ஒரு கூறு செயலி கூறு. பொத்தான் நீங்கள் அனுப்பிய பாணிகளைப் பின்பற்றும் பாணியில் செயல்பாடு, இது போன்ற தோற்றத்தை உருவாக்குகிறது:

தி பாணியில் இதே போன்ற தொடரியல் கொண்ட CSS பாணிகளை கூடு கட்டுவதற்கு செயல்பாடு உங்களை அனுமதிக்கிறது SASS/SCSS நீட்டிப்பு மொழி . இது உங்கள் பாணிகளை ஒழுங்கமைப்பதை எளிதாக்குகிறது மற்றும் உங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாக மாற்றுகிறது.

உள்ளமைக்கப்பட்ட பாணிகள் நுட்பத்தைப் பயன்படுத்தி ஒரு எடுத்துக்காட்டு இங்கே:

import { styled } from "@stitches/react"; 
 
export const Button = styled("button", { 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  backgroundColor: "#333333", 
  color: "#e2e2e2", 
  fontFamily: "cursive", 
  border: "none", 
 
  "&:hover": { 
    backgroundColor: "#e2e2e2", 
    color: "#333333", 
  }, 
}); 

இந்தக் குறியீடு உள்ளமைக்கப்பட்ட CSS பாணிகளையும், ஒரு போலி-வகுப்பையும் குறிவைக்கப் பயன்படுத்துகிறது பொத்தானை கூறு. பொத்தானின் மேல் வட்டமிடும்போது, ​​உள்ளமை தேர்வி &: மிதவை பொத்தானின் பின்னணி மற்றும் உரை வண்ணங்களை மாற்றுகிறது.

CSS செயல்பாட்டுடன் ஸ்டைலிங்

பாணியிலான கூறுகளை உருவாக்குவது உங்களுக்கு சங்கடமாக இருந்தால், தி தையல் நூலகம் வழங்குகிறது css செயல்பாடு, இது உங்கள் கூறுகளை வடிவமைக்க வகுப்பு பெயர்களை உருவாக்க முடியும். தி css செயல்பாடு CSS பண்புகளைக் கொண்ட ஜாவாஸ்கிரிப்ட் பொருளை அதன் ஒரே வாதமாக எடுத்துக்கொள்கிறது.

இதைப் பயன்படுத்தி உங்கள் கூறுகளை எப்படி வடிவமைக்கலாம் என்பது இங்கே css செயல்பாடு:

import React from "react"; 
import { css } from "@stitches/react"; 
 
const buttonStyle = css({ 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  backgroundColor: "#333333", 
  color: "#e2e2e2", 
  fontFamily: "cursive", 
  border: "none", 
 
  "&:hover": { 
    backgroundColor: "#e2e2e2", 
    color: "#333333", 
  }, 
}); 
 
function App() { 
  return ( 
    <> 
      <button className={buttonStyle()}>Click Me</button> 
    </> 
  ); 
} 
 
export default App; 

தி css செயல்பாடு பொத்தானுக்கு CSS பாணிகளை உருவாக்குகிறது, பின்னர் இந்த குறியீடு ஒதுக்குகிறது பட்டன் ஸ்டைல் மாறி. தி பட்டன் ஸ்டைல் செயல்பாடு வரையறுக்கப்பட்ட பாணிகளுக்கு ஒரு வர்க்கப் பெயரை உருவாக்குகிறது, அது பின்னர் க்கு அனுப்பப்படுகிறது வகுப்பின் பெயர் முட்டு பொத்தானை கூறு.

உலகளாவிய பாணிகளை உருவாக்குதல்

பயன்படுத்தி தையல் நூலகத்தைப் பயன்படுத்தி, உங்கள் பயன்பாட்டிற்கான உலகளாவிய பாணிகளையும் நீங்கள் வரையறுக்கலாம் உலகளாவிய சிஎஸ்எஸ் செயல்பாடு. GlobalCss செயல்பாடு உங்கள் ரியாக்ட் பயன்பாட்டிற்கு உலகளாவிய பாணிகளை உருவாக்குகிறது மற்றும் பயன்படுத்துகிறது.

பயன்படுத்தி உங்கள் உலகளாவிய பாணியை வரையறுத்த பிறகு உலகளாவிய சிஎஸ்எஸ் , உங்கள் உள்ள செயல்பாட்டை அழைக்கவும் செயலி உங்கள் பயன்பாட்டிற்கு பாணிகளைப் பயன்படுத்துவதற்கான கூறு.

உதாரணத்திற்கு:

import React from "react"; 
import { globalCss } from "@stitches/react"; 
 
const globalStyles = globalCss({ 
  body: { backgroundColor: "#f2f2f2", color: "#333333" }, 
}); 
 
function App() { 
  globalStyles(); 
 
  return <></>; 
} 
 
export default App; 

இந்த உதாரணம் அதற்கான பாணிகளை வரையறுக்கிறது உடல் உறுப்பு பயன்படுத்தி உலகளாவிய சிஎஸ்எஸ் செயல்பாடு. அழைப்பு பின்னணி நிறத்தை அமைக்கிறது #f2f2f2 மற்றும் உரை நிறம் #333333 .

டைனமிக் ஸ்டைல்களை உருவாக்குதல்

மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று தையல் நூலகம் என்பது டைனமிக் ஸ்டைலை உருவாக்கும் திறன் ஆகும். நீங்கள் சார்ந்து பாணிகளை உருவாக்கலாம் எதிர்வினை முட்டுகள் உடன் மாறுபாடுகள் முக்கிய தி மாறுபாடுகள் திறவுகோல் இருவரின் சொத்து css மற்றும் பாணியில் செயல்பாடுகள். உங்கள் கூறுகளின் பல வகைகளை நீங்கள் விரும்பும் அளவுக்கு உருவாக்கலாம்.

உதாரணத்திற்கு:

import { styled } from "@stitches/react"; 
 
export const Button = styled("button", { 
  padding: "0.7rem 0.8rem", 
  borderRadius: "12px", 
  fontFamily: "cursive", 
  border: "none", 
 
  variants: { 
    color: { 
      black: { 
        backgroundColor: "#333333", 
        color: "#e2e2e2", 
        "&:hover": { 
          backgroundColor: "#e2e2e2", 
          color: "#333333", 
        }, 
      }, 
      gray: { 
        backgroundColor: "#e2e2e2", 
        color: "#333333", 
        "&:hover": { 
          backgroundColor: "#333333", 
          color: "#e2e2e2", 
        }, 
      }, 
    }, 
  }, 
}); 

இந்த குறியீடு ஒரு உருவாக்குகிறது பொத்தானை ஒரு உடன் கூறு நிறம் மாறுபாடு. தி நிறம் மாறுபாடு a இன் அடிப்படையில் பொத்தானின் நிறத்தை மாற்ற உங்களை அனுமதிக்கிறது நிறம் முட்டு நீங்கள் உருவாக்கியதும் பொத்தானை கூறு, நீங்கள் அதை உங்கள் பயன்பாட்டில் பயன்படுத்தலாம்.

Google ஸ்லைடுகளில் gif களை எவ்வாறு சேர்ப்பது

உதாரணத்திற்கு:

import React from "react"; 
import { Button } from "./Button"; 
 
function App() { 
  return ( 
    <> 
      <Button color="gray">Click Me</Button> 
      <Button color="black">Click Me</Button> 
    </> 
  ); 
} 
 
export default App; 

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

தீம் டோக்கன்களை உருவாக்குதல்

தி தையல் வண்ணங்கள், அச்சுக்கலை, இடைவெளி மற்றும் பல போன்ற உங்கள் UI இன் காட்சி அம்சங்களை வரையறுக்கும் வடிவமைப்பு டோக்கன்களின் தொகுப்பை உருவாக்க நூலகம் உங்களை அனுமதிக்கிறது. இந்த டோக்கன்கள் நிலைத்தன்மையைப் பராமரிக்க உதவுவதோடு, உங்கள் பயன்பாட்டின் ஒட்டுமொத்த பாணியைப் புதுப்பிப்பதை எளிதாக்குகிறது.

இந்த தீம் டோக்கன்களை உருவாக்க, பயன்படுத்தவும் தையல்களை உருவாக்கவும் செயல்பாடு. தி தையல்களை உருவாக்கவும் தையல் நூலகத்தின் செயல்பாடு நூலகத்தை கட்டமைக்க உங்களை அனுமதிக்கிறது. பயன்படுத்துவதை உறுதி செய்யவும் தையல்களை உருவாக்கவும் ஒரு செயல்பாடு தையல்கள்.config.ts கோப்பு அல்லது ஏ தையல்கள்.config.js கோப்பு.

தீம் டோக்கனை எவ்வாறு உருவாக்குவது என்பதற்கான எடுத்துக்காட்டு இங்கே:

import { createStitches } from "@stitches/react"; 
 
export const { styled, css } = createStitches({ 
  theme: { 
    colors: { 
      gray: "#e2e2e2", 
      black: "#333333", 
    }, 
    space: { 
      1: "5px", 
      2: "10px", 
      3: "15px", 
    }, 
    fontSizes: { 
      1: "12px", 
      2: "13px", 
      3: "15px", 
    }, 
  }, 
}); 

இப்போது உங்கள் தீம் டோக்கன்களை வரையறுத்துள்ளீர்கள், அவற்றை உங்கள் கூறு பாணிகளில் பயன்படுத்தலாம்.

import { styled } from "../stitches.config.js"; 
 
export const Button = styled("button", { 
  padding: " ", 
  borderRadius: "12px", 
  fontSize: "", 
  border: "none", 
  color: '$black', 
  backgroundColor: '$gray', 
}); 

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

தையல்களுடன் திறமையான ஸ்டைலிங்

தையல் நூலகம் உங்கள் ரியாக்ட் அப்ளிகேஷன்களை ஸ்டைல் ​​செய்ய சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகிறது. ஸ்டைல் ​​செய்யப்பட்ட கூறுகள், டைனமிக் ஸ்டைல்கள் மற்றும் குளோபல் சிஎஸ்எஸ் போன்ற அம்சங்களுடன், நீங்கள் சிக்கலான வடிவமைப்புகளை எளிதாக உருவாக்கலாம். நீங்கள் சிறிய அல்லது பெரிய ரியாக்ட் பயன்பாட்டை உருவாக்கினாலும், ஸ்டைலிங்கிற்கு தையல்கள் சிறந்த தேர்வாக இருக்கும்.

தையல் நூலகத்திற்கு ஒரு சிறந்த மாற்று உணர்ச்சி நூலகம். உணர்வு என்பது பிரபலமான CSS-in-JS நூலகமாகும், இது JavaScript இல் நடைகளை எழுத உங்களை அனுமதிக்கிறது. இது பயன்படுத்த எளிதானது மற்றும் உங்கள் பயன்பாட்டிற்கான சிறந்த பாணிகளை உருவாக்குவதற்கான பல அம்சங்களை வழங்குகிறது.