اعمال style و CSS

چگونه می توانم کلاس های CSS را به کامپوننت ها اضافه کنم؟

متنی به عنوان prop به className اختصاص می دهیم.

render() {
  return <span className="menu navigation-menu">Menu</span>
}

اینکه کلاس های CSS وابسته به props یا state کامپوننت باشند معمول است :

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

راهنما

اگر شما اغلب اوقات همچین کدی را می نویسید، پکیج classnames می تواند آن را ساده تر کند.

آیا می توانم از استایل های درون خطی (inline styles) استفاده کنم؟

بله، اسناد مربوط به طراحی ظاهر را اینجا ببینید.

آیا استایل های درون خطی بد هستند؟

کلاس های CSS معمولاً عملکرد بهتری نسبت به استایل های درون خطی دارند.

CSS در JS چیست ؟

“CSS-in-JS” اشاره دارد به یک الگو که در آن CSS توسط Javascript تشکیل شده است به جای اینکه داخل یک فایل خارجی تعریف شده باشد.

توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده. ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه *.css تعریف کرده و طبق معمول با استفاده از className به آن ها مراجعه کنید.

آیا می توانم با ری اکت انیمیشن انجام دهم؟

ری اکت میتواند برای قدرت بخشیدن به انیمیشن ها استفاده شود. به مثال های React Transition Group و React Motion یا React Spring، نگاه بیاندازید.