خوب عزیزان ، همونطور که میدونین در قسمت قبلی ساختار اولیه مینی پروژه مون رو ایجاد کردیم و اونو تا حدی توسعه دادیم ، اما مشکل اینجاست که پروژه ی ما اصلا ظاهر خوبی نداره و باید استایل دهی بشه ! به همین دلیل در این قسمت قرار هست که با نحوه ی استایل دهی در React آشنا بشیم . ما به دو روش میتونیم عناصرمون رو در React استایل دهی کنیم که در ادامه ی همین بخش ، با هر دو روش آشنا خواهیم شد .
برای شروع در پوشه ی Person یک فایل جدید به نام Person.css ایجاد میکنیم و استایل های موردنظرمون رو بصورت زیر تعریف میکنیم ( البته میتونیم هر اسم دیگه ای رو انتخاب کنیم ، اما برای اینکه بتونیم استایل های مربوط به هر کامپوننت رو بصورت جدا و بهتر مدیریت کنیم ، اسم فایل style و اسم فایل کامپوننت مربوط به هم رو همنام در نظر میگیریم ) :
و بعد به فایل Person.jsxمیریم و این کلاس رو به div ریشه ای اضافه میکنیم :
حالا اگر تغییرات ذخیره کنیم و به مرورگر بریم متوجه میشیم که هیچ اتفاقی نیفتاده !خوب دلیلش واضحه ، چون فایل ها بصورت پیشفرض به پروژه ی ما اضافه نمیشن .بنابراین فایل CSSما )به نامPerson.css (اصلا به پروژه مون اضافه نشده و خودمون باید اونو به صورت دستی ایمپورت کنیم:
به نکته ای که در اینجا باید بهش توجه کنیم این هست که در قطعه کد بالا ، پسوند فایل فقط برای فایل های جاوااسکریپت قابل حذف هست و برای فایل های دیگه مثل فایل های CSS ، حتما باید پسوند فایل رو ذکر کنیم ! خوب حالا اگر به مرورگر برگردیم متوجه میشیم که استایل های ما به اینصورت اعمال شدن :
و اگر از قسمت dev tools مرورگر به تگ <style> در داخل <head> نگاهی بندازیم ، متوجه میشیم که استایل های ما به صورت internal به این قسمت از داکیومنت HTML مون تزریق شدن :
خوب این یک روش استایل دهی عناصر بود . حالا در ادامه میخوایم با روش دوم استایل دهی یعنی استایل دهی inline آشنا بشیم .
در واقع برای اینکه بتونیم در داخل خود کامپوننت ها استایلی بنویسیم ، باید از روش استایل دهی inline استفاده کنیم . این نوع استایل دهی با نحوه ی استایل دهی در بیرون از خود کامپوننت ( استایل دهی در یک فایل CSS مجزا ) کاملا متفاوت هست . به اینصورت که باید یک آبجکت جاوااسکریپتی ایجاد کنیم و بعد در داخل اون ، از خصوصیات استایل دهی در جاوااسکریپت استفاده میکنیم (همونطور که میدونیم استایل های CSS در داخل جاوااسکریپت فرمت خاص خودشونو دارن ، به طور مثال background-color در CSS برابر با backgroundColor در جاوااسکریپت هست). حالا به عنوان مثال اگر بخوایم در داخل کامپوننت App از این روش استفاده کنیم و دو نوشته ی اول صفحه رو هم در وسط صفحه قرار بدیم ، باید به اینصورت عمل کنیم :
در این نوع استایل دهی علامت { } اول مربوط به expression جاوااسکریپت و علامت { } دوم هم مربوط به همون ابجکتی هست که باید استایل هامون رو در داخلش بنویسیم . پس در نتیجه کد بالا رو به اینصورت هم میتونیم بنویسیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که استایل های موردنظرمون بر روی دو نوشته ی اول صفحه هم اعمال شدن و خروجی نهایی مون بصورت زیر هست :
حالا بیایم ببینیم که چطور میتونیم استایل Global داشته باشیم ؟ یعنی به عنوان مثال چطور میتونیم یک فونت فارسی رو طوری تعریف کنیم که کل اپلیکیشنمون ازش استفاده کنه ؟ برای این منظور در داخل پوشه ی public یک پوشه بنام css و یک پوشه بنام fonts ایجاد میکنیم و فونت موردنظرمون رو در داخل پوشه ی fonts قرار میدیم :
سپس در داخل پوشه ی css یک فایل جدید بنام style.css ایجاد میکنیم و استایل های زیر رو در داخلش قرار میدیم :
و بعد این فایل رو به سند HTML مون لینک میکنیم :
حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که اینبار فونتمون هم اعمال شده :
خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم شمارو به خوبی با نحوه ی استایل دهی در React آشنا کرده باشم ، البته در رابطه با استایل دهی بازهم مقاله خواهیم داشت و برای نکات تکمیلی اونجا در خدمتتون خواهم بود :) . راستی تا یادم نرفته اینم بگم که در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین .
و در آخر پیشنهاد میکنم که مقاله ی بعدی رو به هیچ عنوان از دست ندید چراکه قرار هست با مفهوم Conditional Rendering آشنا بشیم و ببینیم چه قابلیتی بهمون میده !
خوب دوستان به زودی میبینمتون :)
