রিঅ্যাক্টে কীভাবে স্টাইল করবেন

ভূমিকা

ভিজ্যুয়ালগুলির সাথে কাজ করা আমাদের ইন্টারফেসকে ইন্টারেক্টিভ রাখার এবং ব্যবহারকারীর দৃষ্টি আকর্ষণ করার একটি দুর্দান্ত উপায়। আমাদের স্ক্রিনে অ্যানিমেটেড বস্তুগুলি একটি অনন্য অভিজ্ঞতা তৈরি করে এবং ইন্টারঅ্যাক্টিভিটি বাড়ায়।

এই নিবন্ধে, আমরা শিখব কিভাবে CSS ব্যবহার করে রিঅ্যাক্টে হোভার স্টাইল করতে হয়, সেইসাথে কিভাবে ইনলাইন হোভার স্টাইলিং করতে হয়।

হোভার হল একটি ছদ্ম-শ্রেণি যা কেবলমাত্র আমাদেরকে নির্দিষ্ট স্টাইল যোগ করার অনুমতি দেয় একজন ব্যবহারকারীকে সচেতন করার জন্য যখন তাদের মাউস একটি নির্দিষ্ট উপাদান চালু এবং বন্ধ থাকে। এই নিবন্ধের জন্য, আমরা একটি বাক্স ব্যবহার করব:

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

যার এই মৌলিক স্টাইলিং আছে:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

মূলত, আমরা পটভূমির রঙ পরিবর্তন করব lightblue যখন মাউসটি বাক্সের উপরে থাকে এবং তারপর মাউসটি সরানো হয় তখন এটিকে তার ডিফল্ট শৈলীতে ফিরিয়ে দিন।

রিঅ্যাক্টে কীভাবে স্টাইল করবেন

এর জন্য দুটি পন্থা রয়েছে: বাহ্যিক এবং ইনলাইন। বাহ্যিক একটি পৃথক CSS ফাইল থাকা জড়িত যা হোভারের জন্য স্টাইল করা সহজ করে, যেখানে ইনলাইন স্টাইলিং আমাদের ছদ্ম-শ্রেণীর সাথে স্টাইল করার অনুমতি দেয় না, তবে আমরা এই নিবন্ধে মাউস ইভেন্টগুলি ব্যবহার করে ইনলাইন CSS-এ কীভাবে স্টাইল করতে হয় তা শিখব।

সিএসএস এক্সটার্নাল স্টাইলিং এর সাথে রিঅ্যাক্টে কিভাবে স্টাইল করবেন

এটি এইচটিএমএল এবং সিএসএস কীভাবে কাজ করে তার সাথে খুব মিল; আমাদের যা করতে হবে তা হল একটি উপাদান দিতে className (না class) অথবা ট্যাগটি নির্বাচক হিসাবে ব্যবহার করুন যা আমরা লক্ষ্য করব এবং তারপরে হোভার সিউডো ক্লাসটি স্টাইল করব:

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

আমরা যা করেছি তা যোগ করা হয়েছে :hover পূর্বে স্টাইল করা নির্বাচকের সাথে ছদ্ম ক্লাস এবং যে কোনো বৈশিষ্ট্য পরিবর্তন করুন যখন আমরা এলিমেন্টের উপর মাউসটি পরিবর্তন করতে চেয়েছিলাম।

ইনলাইন স্টাইলিংয়ের সাথে প্রতিক্রিয়ায় কীভাবে স্টাইল করবেন

ইনলাইন স্টাইলিং দ্বারা, আমরা উপাদানের ট্যাগের মাধ্যমে স্টাইলিং বলতে বোঝায়, যা দিয়ে সম্পন্ন করা হয় style বৈশিষ্ট্য আমরা যদি পূর্ববর্তী কোডটিকে ইনলাইন স্টাইলিংয়ে রূপান্তর করতে চাই:

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

আমাদের অ্যাপের মধ্যে এই ধরনের স্টাইলগুলি পুনরাবৃত্তি করা হলে এটি পড়তে অসুবিধা হতে পারে, তাই আমরা একটি স্টাইল অবজেক্ট তৈরি করতে পারি যদি আমরা একটি পৃষ্ঠায় শুধুমাত্র একটি বস্তুকে স্টাইল করি এবং এর জন্য একটি ফাইল তৈরি করার প্রয়োজন নেই:

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

এখন পর্যন্ত, আমরা আমাদের বাক্স তৈরি করেছি। রিঅ্যাক্টে ইনলাইন CSS এর সাথে হভার করার জন্য, আমরা শর্তসাপেক্ষে একটি স্টেট ব্যবহার করে ইনলাইন স্টাইল সেট করি, সেইসাথে onMouseEnter এবং onMouseLeave প্রপস, যা আমাদের বলে যে মাউস কখন উপাদানটিতে থাকে এবং কখন এটি থাকে না:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

এই মুহুর্তে, আমরা শর্তসাপেক্ষে যে কোনও সম্পত্তি ব্যবহার করে স্টাইল করতে পারি *isHover* অবস্থা:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

এখন পর্যন্ত, আমরা দেখেছি কিভাবে এটি বাস্তবায়ন করা যায়। এখন, আসুন আমাদের কোডটি ভেঙ্গে ফেলি এবং ব্যাখ্যা করি যে কেন আমরা সিনট্যাক্স ব্যবহার করেছি। আমরা এমন একটি অবস্থা তৈরি করে শুরু করেছি যা একটি বুলিয়ান মান সঞ্চয় করে যা নির্দেশ করে যখন হোভারিং ঘটে (true) এবং অন্যথায় (ডিফল্টরূপে এটি সেট করা আছে false):

const [isHover, setIsHover] = useState(false);

তারপরে আমরা আমাদের অবস্থা পরিবর্তন করতে এবং কখন মাউসটি বাক্সে থাকে এবং কখন এটি বাক্সের বাইরে থাকে তা জানতে সহায়তা করার জন্য ডিভিতে দুটি ইভেন্ট যুক্ত করেছি:

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

সার্জারির onMouseEnter ইভেন্ট ট্রিগার হয় যখন মাউস উপাদান প্রবেশ করে, যখন onMouseLeave ঘটনাটি ট্রিগার হয় যখন এটি চলে যায়। আমরা এই প্রতিটি ইভেন্টের জন্য একটি ফাংশন বরাদ্দ করেছি, যা আমরা এখন রাষ্ট্র পরিবর্তন করতে ব্যবহার করি:

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

আমরা সেট state ট্রিগার ইভেন্টের উপর ভিত্তি করে প্রতিটি ফাংশনে। অবশেষে, আমরা শর্তসাপেক্ষে বক্স শৈলী করার জন্য রাষ্ট্র ব্যবহার করতে পারি না শুধুমাত্র জন্য backgroundColor, কিন্তু অন্য কোনো শৈলীর জন্যও:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

যখন আমরা এই সব একসাথে রাখি, আমরা এখন ইনলাইন শৈলীর সাথে প্রতিক্রিয়াতে হোভার স্টাইল করতে সক্ষম হব:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

উপসংহার

আমরা এই নিবন্ধে এক্সটার্নাল স্টাইলিং এবং ইনলাইন স্টাইলিং উভয় ব্যবহার করে রিঅ্যাক্টে কীভাবে স্টাইল করতে হয় তা শিখেছি। যদিও ইনলাইন স্টাইলিং বাঞ্ছনীয় নয়, আমাদের এটি ব্যবহার করার জন্য অনুরোধ করা হলে এটি কীভাবে কাজ করে তা বোঝার জন্য এটি কার্যকর।