Stilləmə və CSS

Komponentlərə CSS siniflərini necə əlavə edə bilərəm?

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

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

Adətən, CSS sinifləri 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.

Sətirdaxili stillər işlədə bilərəm?

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

Sətirdaxili stillər pisdir?

CSS sinifləri sətirdaxili stillərdən daha performanslıdır.

CSS-in-JS nədir?

CSS-in kənar fayllarda tərtib edilməsi əvəzinə JavaScript istifadə edərək tərtib edilməsi metodu “CSS-in-JS” adlanır.

Nəzərə alın ki, bu funksionallıq React-in bir hissəsi deyil. Bu, üçüncü 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ə istifadə 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.