தீர்க்கப்பட்டது: நிலையான பாணிகளைப் பயன்படுத்தி ரியாக்ட் ரூட்டர்

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

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. முதல் வரி ரியாக்ட் லைப்ரரியை இறக்குமதி செய்கிறது.
2. இரண்டாவது வரியானது பிரவுசர் ரூட்டர், ரூட் மற்றும் லிங்க் கூறுகளை ரியாக்-ரூட்டர்-டோம் லைப்ரரியில் இருந்து இறக்குமதி செய்கிறது.
3. மூன்றாவது வரி பாணியிலான கூறுகளை லைப்ரரியில் இருந்து ஸ்டைலிங் கூறுகளை இறக்குமதி செய்கிறது.
4. நான்காவது வரியானது, ரியாக்ட்-ரவுட்டர்-டோமில் இருந்து இறக்குமதி செய்யப்பட்ட இணைப்புக் கூறுகளைப் பயன்படுத்தி ஒரு ஸ்டைல்லிங்க் கூறுகளை உருவாக்குகிறது மற்றும் வண்ணம்: பேலிவியோலெட்ரெட் மற்றும் எழுத்துரு-எடை: தடிமனான, அதே போல் அதன் நிறத்தை வெள்ளையாக மாற்றும் மற்றும் எந்த உரையையும் அகற்றும் ஹோவர் விளைவு மேல் வட்டமிட்ட போது அலங்காரம்.
5. ஐந்தாவது வரியானது ஒரு ஆப் கூறுகளை உருவாக்குகிறது, அது ரூட்டர் கூறுகளை அதன் உள்ளே இரண்டு வழி கூறுகளுடன் (ஒன்று வீட்டிற்கு மற்றும் ஒன்று பற்றி) வழங்குகிறது. இது இரண்டு இணைப்புகளின் (முகப்பு மற்றும் அறிமுகம்) வரிசைப்படுத்தப்படாத பட்டியலையும் வழங்குகிறது, அவற்றின் மேலே உள்ள வரி 4 இல் உருவாக்கப்பட்ட StyledLink கூறுகளைப் பயன்படுத்தி, இரண்டும் ஸ்டைலிங் நோக்கங்களுக்காக ஒரு hr குறிச்சொல்லால் பிரிக்கப்பட்டது.
6. )
7. இறுதியாக, லைன் 12 ஆப்ஸ் கூறுகளை ஏற்றுமதி செய்கிறது, எனவே தேவைப்பட்டால் அதை எங்கள் பயன்பாட்டில் வேறு எங்கும் பயன்படுத்தலாம்

நிலையான பாணிகள்

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

பாணியில்-கூறுகள் தொகுப்பு

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

நிலையான பாணிகளை எவ்வாறு பயன்படுத்துவது

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

const myStyle = {
பின்னணி நிறம்: '#f2f2f2′,
எழுத்துரு அளவு: '20px',
நிறம்: '#000'
};

தொடர்புடைய இடுகைகள்:

ஒரு கருத்துரையை