Stilləmə və CSS

Komponentlərə CSS Klaslarını Necə Əlavə Edə Bilərəm?

Klasları mətn formasında className propuna göndərin:

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

Adətən, CSS klasları proplar və ya state-dən asılı olur:

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

Məsləhət

Əgər yuxarıdakı formalı kodu çox yazırsınızsa classnames paketi ilə bu kodu sadələşdirə bilərsiniz.

Eyni-sətrli Stillər İşlədə Bilərəm?

Bəli, stilləmək haqqında məlumat üçün bu sənədə baxın.

Eyni-sətrli Stillər Pisdir?

CSS klasları eyni-sətrli stillərdən daha tez işləyir.

CSS-in-JS Nədir?

CSS-in kənar fayllarda tərtib edilməsi əvəzinə JavaScript-də tərtib edilməsi metodu “CSS-in-JS” adlanır. CSS-in-JS kitabxanalarının müqayisəsinə buradan baxın.

Nəzərə alın ki, bu funksionallıq React-in bir hissəsi deyil. Bu, 3-cü tərəfli kitabxanalar tərəfindən təmin edilir. React, stillərin necə işlənməsi haqqında heç bir fikir vermir. Əgər seçim edə bilmirsinizsə, başlanğıc nöqtəsi kimi stilləri ayrı *.css fayllarında yaradıb className ilə istinas edə bilərsiniz.

React-də Animasiya Edə Bilərəm?

React ilə animasiya icra etmək mümkündür. React Transition Group, React Motion və ya React Spring kimi kitabxanalara baxın.