React কোনো একটি স্টাইলিং পদ্ধতি দাবি করে না — এখানে এটি নিরপেক্ষ, আর বাস্তব প্রজেক্টে বেশ কয়েকটি সত্যিকারভাবে সাধারণ প্যাটার্ন পাশাপাশি বিদ্যমান।
একটি সাধারণ .css ফাইল, সরাসরি একটি কম্পোনেন্টে ইম্পোর্ট করা, Setup পাঠের বিল্ড টুলিংয়ের সাথে কাজ করে — CSS অংশ থেকে ইতিমধ্যে জানা একই CSS, HTML-এর class-এর বদলে className দিয়ে প্রয়োগ করা:
import './Button.css';
function Button({ children }) {
return <button className="btn-primary">{children}</button>;
}.btn-primary {
background: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 6px;
}সাধারণ CSS-এ কোনো স্কোপিং নেই
সাধারণ CSS ক্লাসের নাম পুরো অ্যাপ জুড়ে গ্লোবাল — একটি ফাইলে .card নামের একটি ক্লাস আরেকটি ফাইলের সাথে সংঘর্ষ করে যা একই .card সংজ্ঞায়িত করে। CSS Module ঠিক এই সমস্যাটাই সমাধান করে।
*.module.css নামের একটি ফাইল বিল্ড টুল থেকে বিশেষ হ্যান্ডলিং পায়: প্রতিটি ক্লাসের নাম স্বয়ংক্রিয়ভাবে ইউনিক কিছুতে পুনর্লিখিত হয়, তাই স্টাইল কখনো কম্পোনেন্টের মধ্যে leak করে না:
import styles from './Button.module.css';
function Button({ children }) {
return <button className={styles.primary}>{children}</button>;
}/* Button.module.css */
.primary {
background: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 6px;
}styles.primary বিল্ড টাইমে Button_primary__a1b2c-এর মতো কিছুতে resolve হয় — সত্যিকারভাবে ইউনিক, সংঘর্ষ এড়াতে কোনো ম্যানুয়াল নামকরণ প্রথার দরকার নেই।
style প্রপ একটি CSS স্ট্রিং নয়, একটি JavaScript অবজেক্ট নেয় — প্রপার্টির নাম camelCase, CSS-এর হাইফেনেটেড কনভেনশনের বদলে JavaScript প্রথার সাথে মেলে:
function Box({ color }) {
return <div style={{ backgroundColor: color, padding: '16px' }}>Content</div>;
}ডাইনামিক মানের জন্য inline স্টাইল, বাকিদের জন্য CSS ফাইল
Inline স্টাইল নির্দিষ্টভাবে রানটাইমে হিসাব করা একটি মানের জন্য সঠিক টুল (props থেকে একটি রঙ, একটি ড্র্যাগ ইন্টারঅ্যাকশন থেকে একটি position) — স্ট্যাটিক যেকোনো কিছুর জন্য, একটি CSS ফাইল বা CSS Module বজায় রাখা সহজ আর :hover বা media query-র মতো জিনিস সাপোর্ট করে যা inline স্টাইল পারে না।
state বা props-এর উপর ভিত্তি করে ক্লাস একত্রিত করা যথেষ্ট সাধারণ যে বেশিরভাগ বাস্তব প্রজেক্ট হাতে স্ট্রিং-কনক্যাটেনেট করার বদলে একটি ছোট হেল্পার লাইব্রেরির (clsx বা classnames) দিকে যায়:
function Button({ variant, children }) {
return (
<button className={variant === 'danger' ? 'btn btn-danger' : 'btn'}>
{children}
</button>
);
}