Tasarım ve CSS

Bileşenlere CSS sınıflarını nasıl eklerim?

Sınıfları className prop’una string olarak ekleyin:

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

CSS sınıflarının, bileşenin prop’larına veya stateine bağlı olması yaygındır:

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

İpucu

Kendinizi sık sık böyle bir kod yazarken buluyorsanız, classnames paketi bunu basitleştirebilir.

Satır içi (inline) stilleri kullanabilir miyim?

Evet, stillendirme ile ilgili dokümana buradan bakın.

Satır içi (inline) stiller kötü mü?

CSS sınıfları, performans açısından genellikle satır içi stillerinden daha iyidir.

JS-içinde-CSS (CSS-in-JS) nedir?

“JS-içinde-CSS”, CSS’in harici dosyalarda tanımlanması yerine, JavaScript kullanılarak oluşturulduğu bir deseni belirtir.

Bu işlevin React’in bir parçası olmadığını, ancak üçüncü parti kütüphaneler tarafından sağlandığını unutmayın. React, stillerin nasıl tanımlandığı hakkında bir görüşe sahip değildir; şüpheniz varsa, stillerinizi her zamanki gibi ayrı bir *.css dosyasında tanımlamak ve className kullanarak bunlara erişmek iyi bir başlangıç noktasıdır.

React’te animasyon yapabilir miyim?

React, animasyonlara güç vermek için kullanılabilir. Örneğin, React Transition Group, React Motion , React Spring veya Framer Motion ‘a bakabilirsiniz.