আমরা সবাই এর আদর্শ উপায়ের সাথে পরিচিত একটি স্টাইলশীট লিঙ্ক আপ করা থেকে <head> একটি HTML ডক, ডান? আমরা CSS লিখতে সক্ষম এমন কয়েকটি উপায়ের মধ্যে এটি মাত্র একটি। কিন্তু একটি একক-পৃষ্ঠা অ্যাপ্লিকেশনে (এসপিএ) জিনিসগুলিকে স্টাইল করতে কেমন লাগে, প্রতিক্রিয়া প্রকল্পে বলুন?
একটি প্রতিক্রিয়া অ্যাপ্লিকেশন স্টাইল সম্পর্কে যেতে বিভিন্ন উপায় দেখা যাচ্ছে. কিছু প্রথাগত স্টাইলিং সঙ্গে ওভারল্যাপ, অন্যরা তাই না। তবে আসুন আমরা এটি করতে পারি এমন সমস্ত উপায় গণনা করি।
বাহ্যিক স্টাইলশীট আমদানি করা হচ্ছে
নাম অনুসারে, প্রতিক্রিয়া CSS ফাইল আমদানি করতে পারে। প্রক্রিয়াটি আমরা যেভাবে HTML-এ CSS ফাইল লিঙ্ক করি তার অনুরূপ <head>:
- আপনার প্রকল্প ডিরেক্টরিতে একটি নতুন CSS ফাইল তৈরি করুন।
- CSS লিখুন।
- এটি প্রতিক্রিয়া ফাইলে আমদানি করুন।
এটার মত:
import "./style.css";এটি সাধারণত ফাইলের শীর্ষে যায় যেখানে অন্যান্য আমদানি হয়:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;এই উদাহরণে, একটি সিএসএস ফাইল একটিতে আমদানি করা হয় App.js থেকে /Components/css ফোল্ডার.
ইনলাইন শৈলী লিখুন
আপনি শুনতে অভ্যস্ত হতে পারেন যে ইনলাইন স্টাইলিং রক্ষণাবেক্ষণের জন্য এতটা দুর্দান্ত নয় এবং যা কিছু নয়, তবে অবশ্যই পরিস্থিতি রয়েছে (এখানে একটি!) যেখানে এটি অর্থপূর্ণ। এবং রক্ষণাবেক্ষণযোগ্যতা প্রতিক্রিয়াতে একটি সমস্যা কম, কারণ CSS প্রায়শই ইতিমধ্যে একই ফাইলের ভিতরে বসে থাকে।
এটি প্রতিক্রিয়াতে ইনলাইন স্টাইলিং এর একটি অতি সাধারণ উদাহরণ:
<div className="main" style={{color:"red"}}>একটি ভাল পদ্ধতি, যদিও, বস্তু ব্যবহার করা হয়:
- প্রথমে, একটি বস্তু তৈরি করুন যাতে বিভিন্ন উপাদানের শৈলী রয়েছে।
- তারপর এটি ব্যবহার করে একটি উপাদান যোগ করুন
styleবৈশিষ্ট্য এবং তারপর শৈলীতে সম্পত্তি নির্বাচন করুন।
আসুন এটি প্রসঙ্গে দেখি:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;এই উদাহরণ একটি রয়েছে styles আরো দুটি বস্তু ধারণকারী বস্তু, একটি জন্য .main ক্লাস এবং অন্যটি একটি টেক্সট ইনপুটের জন্য, যাতে স্টাইল নিয়ম থাকে যা আমরা একটি বাহ্যিক স্টাইলশীটে দেখতে চাই। এই বস্তুগুলি তারপর প্রয়োগ করা হয় style ফিরে আসা মার্কআপে থাকা উপাদানগুলির বৈশিষ্ট্য।
উল্লেখ্য যে কোঁকড়া বন্ধনী ব্যবহার করা হয় শৈলী উল্লেখ করার সময় উদ্ধৃতি চিহ্নের পরিবর্তে আমরা সাধারণত প্লেইন HTML এ ব্যবহার করি।
CSS মডিউল ব্যবহার করুন
CSS মডিউল… হেক তাদের কি হয়েছে, তাই না? তাদের স্থানীয়ভাবে স্কোপড ভেরিয়েবলের সুবিধা রয়েছে এবং প্রতিক্রিয়ার পাশাপাশি ব্যবহার করা যেতে পারে। কিন্তু তারা, আবার, ঠিক কি?
উদ্ধৃতি রেপো এর ডকুমেন্টেশন:
CSS মডিউলগুলি CSS এবং ডেটা উভয়ের মধ্যে পৃথক CSS ফাইল কম্পাইল করে কাজ করে। CSS আউটপুট স্বাভাবিক, গ্লোবাল CSS, যা সরাসরি ব্রাউজারে ইনজেকশন করা যেতে পারে বা একসাথে সংযুক্ত করা যেতে পারে এবং উত্পাদন ব্যবহারের জন্য একটি ফাইলে লেখা যায়। ডেটা ব্যবহার করা হয় মানব-পাঠযোগ্য নামগুলিকে ম্যাপ করতে যা আপনি ফাইলগুলিতে ব্যবহার করেছেন বিশ্বব্যাপী-নিরাপদ আউটপুট CSS-এ।
সহজ কথায়, CSS মডিউল আমাদেরকে একাধিক ফাইলে একই ক্লাসের নাম ব্যবহার করার অনুমতি দেয় ক্ল্যাশ ছাড়াই যেহেতু প্রতিটি ক্লাসের নাম একটি অনন্য প্রোগ্রাম্যাটিক নাম দেওয়া হয়। এটি বৃহত্তর অ্যাপ্লিকেশনগুলিতে বিশেষভাবে কার্যকর। প্রতিটি শ্রেণীর নাম স্থানীয়ভাবে নির্দিষ্ট উপাদানের জন্য স্কোপ করা হয় যেখানে এটি আমদানি করা হচ্ছে।
একটি CSS মডিউল স্টাইলশীট একটি নিয়মিত স্টাইলশীটের অনুরূপ, শুধুমাত্র একটি ভিন্ন এক্সটেনশন সহ (যেমন styles.module.css) সেগুলি কীভাবে সেট আপ করা হয়েছে তা এখানে:
- দিয়ে একটি ফাইল তৈরি করুন
.module.cssএক্সটেনশন হিসাবে। - প্রতিক্রিয়া অ্যাপে সেই মডিউলটি আমদানি করুন (যেমন আমরা আগে দেখেছি)
- যুক্ত কর একটি
classNameএকটি উপাদান বা উপাদান এবং আমদানি করা শৈলী থেকে নির্দিষ্ট শৈলী উল্লেখ.
অতি সহজ উদাহরণ:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;স্টাইলযুক্ত উপাদান ব্যবহার করুন
আপনি ব্যবহার করেছেন? শৈলীকৃত উপাদান? এটি বেশ জনপ্রিয় এবং আপনাকে আপনার জাভাস্ক্রিপ্টে প্রকৃত CSS ব্যবহার করে কাস্টম উপাদান তৈরি করতে দেয়। একটি স্টাইলড-কম্পোনেন্ট মূলত একটি রিঅ্যাক্ট কম্পোনেন্ট যার সাথে — এর জন্য প্রস্তুত হন — শৈলী। কিছু বৈশিষ্ট্যের মধ্যে রয়েছে অনন্য ক্লাসের নাম, গতিশীল স্টাইলিং এবং CSS এর আরও ভালো ব্যবস্থাপনা কারণ প্রতিটি উপাদানের নিজস্ব আলাদা শৈলী রয়েছে।
কমান্ড লাইনে স্টাইলড-কম্পোনেন্ট এনপিএম প্যাকেজ ইনস্টল করুন:
npm install styled-componentsপরবর্তীতে, এটিকে প্রতিক্রিয়া অ্যাপে আমদানি করুন:
import styled from 'styled-components'একটি উপাদান তৈরি করুন এবং এটিতে একটি শৈলীযুক্ত সম্পত্তি বরাদ্দ করুন। ব্যাকটিক্স দ্বারা চিহ্নিত টেমপ্লেট লিটারালের ব্যবহার লক্ষ্য করুন৷ Wrapper বস্তু:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;সর্বোপরি Wrapper কম্পোনেন্ট একটি ডিভ হিসাবে রেন্ডার করা হবে যাতে সেই শৈলীগুলি রয়েছে।
শর্তাধীন স্টাইলিং
স্টাইলড-কম্পোনেন্টগুলির একটি সুবিধা হল যে উপাদানগুলি নিজেই কার্যকরী, যেমন আপনি CSS-এর মধ্যে প্রপস ব্যবহার করতে পারেন। এটি শর্তাধীন বিবৃতি এবং একটি রাষ্ট্র বা প্রপের উপর ভিত্তি করে শৈলী পরিবর্তনের দরজা খুলে দেয়।
এখানে একটি ডেমো দেখানো হচ্ছে:
এখানে, আমরা div এর ম্যানিপুলেট করছি display ডিসপ্লে অবস্থায় সম্পত্তি। এই অবস্থাটি একটি বোতাম দ্বারা নিয়ন্ত্রিত হয় যা ক্লিক করার সময় div-এর অবস্থা টগল করে। এটি, ঘুরে, দুটি ভিন্ন রাজ্যের শৈলীর মধ্যে টগল করে।
ইনলাইনে if বিবৃতি, আমরা একটি ব্যবহার করি ? স্বাভাবিকের পরিবর্তে if/else বাক্য গঠন. দ্য else অংশ সেমিকোলনের পরে। এবং সর্বদা কল করতে বা স্টেটটি চালু করার পরে ব্যবহার করতে ভুলবেন না। যে শেষ ডেমো, উদাহরণস্বরূপ, রাষ্ট্র উপরে হতে হবে Wrapper উপাদানের শৈলী।
হ্যাপি রিঅ্যাক্ট স্টাইলিং!
এটা একটা মোড়ানো, লোকেরা! আমরা একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে শৈলী লেখার জন্য মুষ্টিমেয় বিভিন্ন উপায় দেখেছি। এবং এটা এমন নয় যে একজন বাকিদের চেয়ে ভালো; আপনি যে পদ্ধতি ব্যবহার করেন তা অবশ্যই পরিস্থিতির উপর নির্ভর করে। আশা করি এখন আপনি সেগুলি সম্পর্কে ভালভাবে বুঝতে পেরেছেন এবং জানেন যে আপনার প্রতিক্রিয়া স্টাইলিং অস্ত্রাগারে একগুচ্ছ সরঞ্জাম রয়েছে৷
