JSX و CSS

JSX و CSS

1366 808 سینا

JSX و CSS

در React شما به 3 روش می توانید استایل دهی کنید.

  1. استفاده از css در فایل جدا و import کردن آن در کامپوننت
  2. استفاده از css در فایل جدا و استفاده از تگ <Link> در هدر صفحه html
  3. نوشتن css به صورت inline : در این حالت شما باید مشخصه style یک تگ را برابر یک شی (object) جاوا اسکریپتی قرار دهید. در این object مشخصه های css را باید به صورت camelCase وارد کنید. برای مثال به جای استفاده از margin-top باید از marginTop استفاده کنید. همچنین در این روش نیازی به استفاده از px نیست و در صورتی که میخواهید واحد شما px باشد از عدد خالی استفاده کنید. به این شکل  marginTop:30

هر سه روش در ReactJS استفاده می شود اما برای استایل دهی در React Native فقط از روش سوم باید استفاده کنیم.

روش های اول و دوم نیازی به توضیح ندارند و مشابه css ایست که در گذشته استفاده می کردیم (تنها تفاوت اینجاست که ما به جای class از className استفاده می کنیم). اما روش سوم را با مثال زیر بررسی می کنیم.

در کامپوننت بالا مشاهده می کنید که ما ابتدا یک شی جاوا اسکریپتی با نام myStyle ایجاد کرده ایم که مشخصه های css آن به صورت camelCase آمده اند (fontSize به جای font-size). سپس این object را به عنوان style به تگ h1 نسبت داده ایم.

حال نگاهی به کامپوننت زیر می اندازیم که دقیقا معادل همین کامپوننت است.

در این کامپوننت مشاهده می کنید که ما object را به شکل جدا تعریف نکرده و آن را داخل style نوشته ایم. از نظر کارایی این دو روش هیچ تفاوتی با هم ندارند. ولی روش اول ساختار بهتری دارد.

همچنین کار دیگری که می توان کرد این است که ما یک object به شکل سراسری تعریف کنیم که شامل style های ما است. مثال زیر را ببینید.

ما در اینجا یک object به نام styles تعریف کرده ایم که شامل دو object دیگری است. برای استفاده از این object نیز به مثال توجه کنید. همانطور که می بینید از styles.myStyle1 و styles.myStyle2 استفاده کرده ایم.

آخرین نکته این آموزش نحوه استفاده از واحد ها است. همانطور که ملاحظه کردید ما در myStyle1 از fontSize:10 و در myStyle2 از fontSize:’11px’ استفاده کردیم. این دو حالت متفاوت استفاده از واحد px است. شما اگر می خواهید از واحدی به غیر از px استفاده کنید می بایست آن را داخل ‘ ‘ قرار دهید اما در صورتی که می خواهید از واحد px استفاده کنید فقط کافی است آن را به صورت عددی استفاده کنید و خود React واحد px را به آن اضافه می کند.

همچنین می توانید object ساخته شده را به فایل جدایی برده و آن را ایمپورت کنید که این کار را در بخش React Native خواهیم دید.