استایل دهی به تگها در react.js

استایل دهی به کامپوننت ها و المنت ها در react.Js انواع مختلفی داره. در اینجا براتون یک مدل ساده رو مثال میزنم. باید دقت کنید که Style ها در ری اکت تفاوت چندانی با استایل دهی به صورت عادی نداره و تقریبا مشابه هستن.

استایل دهی به روش مستیم در react.js

روش اول استایل دهی در React.js استایل دهی به روش مستقیم هست. یعنی شما هر تگی رو که میخاید استایل رو تغغیر بدید مستقیما براش دستورات رو می نویسید.

  <p style={{color:'blue', fontWeight:'bold'}}>Hello World !!!</p>

مثال بالا استایل دهی به روش مستقیم در react.js هست. همان طوری که می بینید درون تگ p یک کلمه style نوشته شده و 2 بار آکولاد باز شده و درون اون توسط دستورات جاوااسکریپت استایل ها مشخص شده.

استایل دهی به روش Inline Style در react.js

در روش استایل دهی به روش Inline Style یک متغیر از نوع const تعریف می شود و استایل ها درون اون قرار می گیرن. برای راهنمایی درک بهتر مثال زیر رو مشاهده کنید

const myStyle={
  color:'red',
  fontWeight:'bold'
}

<p style={myStyle}>Hello World !!!</p>

در این روش هم با استفاده از دستورات جاوااسکریپت استایل دهی انجام می شود.

استایل دهی با استفاده از Css Style Sheet

در این روش در کنار کامپوننت یک فایل css هم ایجاد می کنیم و تمامی استایل های مورد نیاز را در آن ایجاد می کنیم. به تصویر زیر دقت نمایید

در تصویر بالا فایل props.css برای استایل ها مورد استفاده قرار می گیرد. در این فایل استایل های زیر را وارد می کنید

.myStyle{
    color: red;
    font-weight: bold
}

حالا در فایل props.js در ابتدای فایل import لازم را به شکل زیر انجام می دهیم.

import './props.css';

و توسط خاصیت className میتوانیم از استایل تعریف شده در فایل css استفاده کنیم

  <p className="myStyle">Hello World</p>

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

موفق باشید