রিঅ্যাক্ট রাউটারের সাথে স্ট্যাটিক শৈলী ব্যবহার করার সাথে সম্পর্কিত প্রধান সমস্যা হল বিভিন্ন রুট এবং তাদের সম্পর্কিত শৈলীগুলির ট্র্যাক রাখা কঠিন হতে পারে। স্ট্যাটিক শৈলীর সাথে, প্রতিটি রুটের নিজস্ব CSS নিয়মের সেট থাকা প্রয়োজন, যা দ্রুত অপ্রীতিকর এবং বজায় রাখা কঠিন হতে পারে। অতিরিক্তভাবে, যদি একটি শৈলী একাধিক রুটে ব্যবহার করা হয়, তবে এটিকে তাদের সমস্ত জুড়ে ডুপ্লিকেট করা প্রয়োজন, এটি DRY কোডটি রাখা কঠিন করে তোলে (নিজেকে পুনরাবৃত্তি করবেন না)।
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. চতুর্থ লাইনটি রিঅ্যাক্ট-রাউটার-ডম থেকে আমদানি করা লিঙ্ক উপাদান ব্যবহার করে একটি স্টাইলডলিঙ্ক উপাদান তৈরি করে এবং এটিকে রঙ দিয়ে স্টাইল করে: প্যালেভিওলেটেড এবং ফন্ট-ওয়েট: বোল্ড, সেইসাথে একটি হোভার ইফেক্ট যা এর রঙ সাদাতে পরিবর্তন করে এবং যেকোনো টেক্সট সরিয়ে দেয়। সজ্জা যখন উপর hovered.
5. পঞ্চম লাইন একটি অ্যাপ কম্পোনেন্ট তৈরি করে যা একটি রাউটার কম্পোনেন্ট রেন্ডার করে যার ভিতরে দুটি রুট উপাদান রয়েছে (একটি হোমের জন্য এবং একটি সম্পর্কে)। এটি স্টাইলিং উদ্দেশ্যে hr ট্যাগ দ্বারা পৃথক করা তাদের উপরে লাইন 4-এ তৈরি StyledLink কম্পোনেন্ট ব্যবহার করে দুটি লিঙ্কের (হোম এবং অ্যাবাউট) একটি ক্রমবিহীন তালিকা রেন্ডার করে।
6. লাইন 8 – 11 দুটি কার্যকরী উপাদান তৈরি করে যার নাম Home এবং About যেগুলি তাদের ভিতরে তাদের নিজ নিজ নাম সহ h2 ট্যাগ রেন্ডার করে যখন তাদের উভয়ের উপরে লাইন 5-এ তাদের নিজ নিজ রুট উপাদানগুলির দ্বারা ডাকা হয় (হোম রেন্ডার করে "হোম" যখন রেন্ডার করে "সম্পর্কে" )
7. অবশেষে, লাইন 12 অ্যাপের উপাদানটি রপ্তানি করে যাতে প্রয়োজনে এটি আমাদের অ্যাপ্লিকেশনের অন্য কোথাও ব্যবহার করা যেতে পারে
স্ট্যাটিক শৈলী
রিঅ্যাক্ট রাউটারে স্ট্যাটিক শৈলী হল এমন স্টাইল যা একটি কম্পোনেন্টে প্রয়োগ করা হয় এবং কম্পোনেন্টের অবস্থা বা প্রপসে যেকোন পরিবর্তন না করে একই থাকে। এটি গতিশীল শৈলীর বিপরীতে, যা একটি উপাদানের অবস্থা বা প্রপসের উপর নির্ভর করে পরিবর্তিত হয়। স্থির শৈলীগুলি একটি অ্যাপ্লিকেশন জুড়ে একটি সামঞ্জস্যপূর্ণ চেহারা এবং অনুভূতি তৈরি করতে ব্যবহার করা যেতে পারে, সেইসাথে প্রতিবার পরিবর্তনের সময় ম্যানুয়ালি সামঞ্জস্য না করে বিকাশকারীদের দ্রুত স্টাইল করার একটি সহজ উপায় প্রদান করে৷
শৈলীযুক্ত উপাদান প্যাকেজ
স্টাইলড-কম্পোনেন্টস হল রিঅ্যাক্ট রাউটারের একটি জনপ্রিয় প্যাকেজ যা ডেভেলপারদের তাদের রিঅ্যাক্ট অ্যাপ্লিকেশনে কম্পোনেন্ট-লেভেল স্টাইল তৈরি এবং পরিচালনা করতে দেয়। এটি সিএসএস কোড লেখার একটি সহজ উপায় প্রদান করে যা একটি একক উপাদানে স্কোপ করা হয়, এটি বজায় রাখা এবং ডিবাগ করা সহজ করে তোলে। স্টাইল করা উপাদানগুলি একাধিক উপাদান জুড়ে শৈলী ভাগ করা সহজ করে, সেইসাথে থিমিংয়ের জন্য সমর্থন প্রদান করে। উপরন্তু, স্টাইলড-কম্পোনেন্টগুলি রিঅ্যাক্ট রাউটারের লিঙ্ক কম্পোনেন্টের সাথে ব্যবহার করা যেতে পারে, যা ডেভেলপারদের তাদের অ্যাপ্লিকেশনের মধ্যে লিঙ্ক স্টাইল করতে দেয়।
স্ট্যাটিক শৈলী কিভাবে ব্যবহার করবেন
ইনলাইন স্টাইল অ্যাট্রিবিউট ব্যবহার করে রিঅ্যাক্ট রাউটারে স্ট্যাটিক স্টাইল ব্যবহার করা যেতে পারে। এই বৈশিষ্ট্যটি আপনাকে আলাদা স্টাইলশীটের প্রয়োজন ছাড়াই একটি উপাদানে সরাসরি একটি স্টাইল প্রয়োগ করতে দেয়। রিঅ্যাক্ট রাউটারে স্ট্যাটিক শৈলী ব্যবহার করতে, আপনাকে একটি স্টাইল অবজেক্ট তৈরি করতে হবে এবং তারপরে উপাদানটির স্টাইল প্রপের যুক্তি হিসাবে এটি পাস করতে হবে। উদাহরণ স্বরূপ:
const myStyle = {
ব্যাকগ্রাউন্ড কালার: '#f2f2f2',
ফন্ট সাইজ: '20px',
রঙ: '#000'
};