سلام عزیزان ، به پارت یازدهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . اگر مقاله ها رو تا به اینجا به ترتیب خونده باشین ، قطعا میدونین که "در پارت نهم" اومدیم با نحوه ی استایل دهی در React آشنا شدیم و اون آخر آخراش خدمتتون گفتم که در رابطه با موضوع استایل دهی بازهم مقاله خواهیم داشت و نتیجتا این مقاله ای که الان دارین میخونین ، همون پارت تکمیل کنندست :) واقعیت از این قراره که در رابطه با استایل دهی یکسری نکات مهم و ضروری وجود داره که من سعی کردم داخل این مقاله همشونو کاور کنم و پرونده ی استایل دهی رو ببندم دیگه :) خوب منتظر چی هستین ؟ بیاین شروع کنیم ...
تا به اینجا اگر به کدهای پروژه مون نگاهی بندازیم ، متوجه میشیم که استایل های ساده ای داریم اما ما گاهی اوقات نیاز داریم که از استایل های پیشرفته تری هم استفاده کنیم . به طور مثال دکمه ی "نمایش اشخاص" یک دکمه ی سادست و اگر روی اون hover کنیم ، هیچ اتفاقی نمیفته و ظاهرش تغییر نمیکنه . در واقع مشکل استایل های inline ، این هست که قابلیت استفاده از pseudo-selector هایی مثل hover رو ندارن و در عین حال خوبی این روش این هست که استایل هامون scope دارن ، یعنی مخصوص همین دکمه هستن و بصورت سراسری اعمال نمیشن ، بنابراین اگر دکمه های دیگه ای ایجاد کنیم ، استایل موردنظرمون بر روی اونها اعمل نخواهند شد .
از طرفی استفاده از فایل هایCSS باعث میشه که استایل های ما scope خودشونو از دست بدن ، یعنی فرضا اگر مشابه دکمه ی "نمایش اشخاص" ، دکمه های دیگه ای ایجاد کنیم ، اون دکمه ها هم استایل هایی که برای این دکمه تعریف کردیم رو به ارث میبرن ، اما در عوضش میتونیم از pseudo-selector هایی مثل hover و سایر امکانات دیگه CSS استفاده کنیم ! خوب فکر کنم کم کم لامپ مغزتون روشن شد که در این قسمت میخوایم چیکار کنیم :) بله در این قسمت قرار هست با نحوه ی رفع این مشکلات آشنا بشیم :)
همونطور که گفته شد استایل های inline دارای scope هستن ، اما مشکل اینجاست که چنین استایل هایی قابلیت استفاده از pseudo-selector هایی مثل hover رو ندارن ! برای رفع این مشکل و فعال کردن این قابلیت ، میتونیم از پکیج Radium استفاده کنیم ! پکیج Radium یک کتابخونه برای React هست که به ما اجازه میده هنگام کار با استایل های inline ، بتونیم از قابلیت های پیشرفته تر CSS مثل pseudo-selector ها ، media query ها و غیره استفاده کنیم ! برای نصب Radium از طریق npm ، کافیه که در محیط Terminal دستور زیر رو اجرا کنیم :
بعد از اجرای این دستور باید منتظر بمونیم تا Radium برامون نصب بشه . قبل از شروع کار با Radium ، در هر فایلی که میخوایم ازش استفاده کنیم ، در وهله ی اول باید اونو import کنیم و چونکه ما میخوایم استایل دکمه ی موجود در فایل App.js رو تغییر بدیم ، پس Radium رو به اینصورت در داخل فایل App.js ایمپورت میکنیم :
سپس هنگام export کردن کامپوننت App ، باید اونو در داخل کامپوننت Radium قرار بدیم :
حالا ما آماده ی استفاده از radium هستیم . به عنوان مثال اگر بخوایم برای دکمه مون hover تعریف کنیم ، باید بصورت زیر عمل کنیم :
همونطور که مشخصه هنگام تعریف pseudo-selector ها در استایل دهی inline ، باید pseudo-selector مورد نظرمون رو مثل قطعه کد بالا در داخل یک دابل کوتیشن ( " " ) قرار بدیم و برای مقدارش یک آبجکت جاوااسکریپتی رو در نظر بگیریم و پراپرتی های موردنظرمون رو در داخلش بنویسیم ! به عنوان مثال با توجه به استایلی که نوشتیم اگر بر روی دکمه ی موردنظرمون hover کنیم ، خواهیم دید که مقدار color ش برابر black و مقدارbackgroundColor ش برابر lightgreen خواهد شد ! حالا اگر در شرایط خاصی بخوایم این استایل هارو تغییر بدیم ، باید بصورت زیر عمل کنیم :
همونطور که میبینیم برای تغییر مقادیر pseudo-selector مون از علامت براکت ( [ ] ) استفاده کردیم . خوب حالا بیایم یکی دیگه از قابلیت های radium رو بررسی میکنیم ، یعنی استفاده از media query ها ! برای این منظور فایل Person.jsx رو باز میکنیم و بعد از import کردنradium یک media query بصورت زیر تعریف میکنیم :
همونطور که مشخصه media query مورد نظرمون رو در داخل یک دابل کوتیشن ( " " ) قرار دادیم . حالا بطور مثال اگر فرض کنیم که میخوایم در عرض های بیشتر از 500 پیکسل ، عرض کادر مربوط به هر Person رو روی 450 پیکسل نگه داریم ، باید به اینصورت عمل کنیم :
سپس استایل موردنظرمون رو به اینصورت به کامپوننت مون اضافه کنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، با همچین اروری مواجه خواهیم شد :
این یعنی اگر بخوایم هنگام استایل دهی inline از pseudo-selector هایی مثل hover استفاده کنیم ، هیچ مشکلی نخواهیم داشت اما اگر بخوایم از ویژگی هایی مثل keyframe ها و یا media query ها استفاده کنیم ، باید کامپوننت والد برنامه مون که در اینجا App هست رو در داخل یک کامپوننت خاص بنام styleRoot قرار بدیم ! برای این منظور در ابتدا کامپوننت styleRoot رو به اینصورت در داخل فایل App.js ایمپورت میکنیم ( همونطور که گفته شد فایل App.js نه Person.jsx ) :
سپس اونو به عنوان المنت root به کامپوننت App اضافه میکنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که مشکلمون رفع شده و media query مون داره به درستی کار میکنه ! خوب ما تا اینجا با radium آشنا شدیم و دیدیم که یکی از راه های استفاده از تمام ویژگی های CSS در استایل دهی ها (استایل دهی inline) ، استفاده از پکیج radium هست . در ادامه با CSS Module ها که یکی دیگه از راه های استایل دهی هستن ، آشنا میشیم !
خوب رسیدیم به بخش شیرین مارجرا :) بچه ها CSS Module ها روشی هستن که با استفاده از اونها میتونیم از فایل های CSS در جاوااسکریپت استفاده کنیم تا حتی اگر اسم کلاس های چند عنصر رو مشابه هم قرار دادیم ، استایل های اون فایل CSS فقط بر روی عنصر مربوطه اعمال بشن و بر روی عناصر دیگه اعمال نشن !
قبل از استفاده از CSS Module ها ، باید در وهله ی اول تمام مواردی که تا به اینجا به برنامه مون اضافه کردیم رو حذف کنیم ، به اینصورت که ابتدا وارد فایل Person.jsx میشیم و دستور import مربوط به radium و استایل هایی که تعریف کردیم رو از داخلش حذف میکنیم ، یعنی محتوای فایلمون بعد از اعمال تغییرات باید به اینصورت باشه :
سپس وارد فایل App.js میشیم و دستور import مربوط به radium و StyleRoot ، کامپوننت <StyleRoot> و استایل هایی که تعریف کردیم رو هم حذف میکنیم. سپس برای کامپوننت App هم یک فایل CSS جدا بنام App.css ایجاد میکنیم و استایل های inline ای که در داخل کامپوننتمون تعریف کردیم رو به اینصورت در داخلش قرار میدیم :
و بعد اونو در داخل کامپوننتمون import میکنیم :
بعد از انجام این مراحل ، قاعدتا باید قسمت return رو هم بصورت زیر اصلاح کنیم :
حالا بیایم به اصل موضوع بپردازیم :) برای استفاده از CSS Module ها ، قبل از هر چیزی باید پسوند فایل های CSS رو از فرمت filename.css به فرمت filename.module.css تغییر بدیم تا به عنوان CSS Module به حساب بیان ! مثلا باید اسم فایل Person.css رو به Person.module.css و اسم فایل App.css رو به App.module.css تغییر بدیم ! همچنین دستور مربوط به import کردنشون رو هم باید بصورت زیر اصلاح کنیم :
توجه کنیم که در دستورات بالا classes یک آبجکت جاوااسکریپتی هست که استایل هارو در داخل خودش نگهداری میکنه و ما میتونیم به جای اون از هر اسم دیگه ای مثل styles استفاده کنیم ، این موضوع کاملا اختیاری هست ! بعد از انجام این کار ، فایل های CSS مون دارای Scope خواهند بود . بطور مثال فایل App.module.css ای که در داخل فایل App.js ایمپورت کردیم ، فقط و فقط مختص همین کامپوننت هست و روی کامپوننت های دیگه هیچ تاثیری نداره ! حالا برای استفاده از این استایل ها ، باید در کامپوننت App و در کامپوننت Person به اینصورت عمل کنیم :
حالا نوبت اضافه کردن Media Query هاست ! برای این منظور وارد فایل Person.module.css میشیم و Media Query موردنظرمون رو به اینصورت تعریف میکنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که استایل هامون به درستی اعمال شدن ! در آخر بخاطر اینکه مباحث استایل دهی یک مقدار طولانی شد ، بهتره یک جمع بندی کلی داشته باشیم :)
ما تا به اینجا یاد گرفتیم که چطور میتونیم کامپوننت ها و عناصر مختلف رو در React استایل دهی کنیم و بطور مفصل با مشکلات و راه حل های موجود آشنا شدیم ! خلاصه ای از نکات مهم مرتبط با استایل دهی رو در زیر میبینیم :
خوب عزیزان این قسمت هم به پایان رسید و امیدوارم که لذت برده باشین . انتظار میره که بعد از خوندن این مقاله دیگه با نحوه ی استایل دهی عناصر در React مشکل خاصی نداشته باشین ! در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین . در آخر ، تا پابلیش پارت بعدی مراقب خودتون باشید :) فعلا ...
