Styling and CSS در React

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

یک رشته را به عنوان className prop منتقل کنید:

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

در class های CSS رایج است که وابسته به props یا حالت کامپوننت باشند:

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

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

 

آیا می‌توانم از استایل‌های مرتب شدۀ خطی استفاده کنم؟

بله، می‌توانید در این مورد بخش مربوط به استایل را ببینید.

آیا استایل‌های مرتب شدۀ خطی نامناسب هستند؟

به طور کلی class های CSS از نظر عملکردی نسبت به استایل‌های مرتب شدۀ خطی بهتر هستند.

CSS-in-JS چیست؟

CSS-in-JS اشاره به الگویی دارد که در آن CSS به جای تعریف در فایل‌های خارجی، با استفاده از جاوا اسکریپت ساخته شده است. می‌توانید در این قسمت مقایسه‌ای از کتابخانه‌های CSS-in-JS را بخوانید.

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

آیا می‌توانم از انیمیشن در React استفاده کنم؟

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4٫50 out of 5)
Loading...
counter customizable free hit