React JS Stilleri ve Kullanımı

React JS’de stiller, bileşenlerin görünümünü özelleştirmek ve CSS ile ilgili işlevselliği yönetmek için kullanılır. React’te stillerle çalışmanın farklı yolları vardır ve bunlar arasında en yaygın olanları şunlardır:

Inline Stiller: React bileşenlerine stil doğrudan JSX içinde style özelliği ile atanabilir. Stil nesnesi JavaScript’te tanımlanır ve ardından JSX içinde kullanılır.

const myStyle = {
  color: 'blue',
  fontSize: '16px',
};

function MyComponent() {
  return <div style={myStyle}>Bu metin mavi renkte ve 16px büyüklüğünde.</div>;
}

CSS Dosyaları ve SASS/SCSS: Genellikle daha büyük projelerde, stil tanımlamalarını ayrı CSS dosyalarında veya SASS/SCSS gibi CSS ön işleyicileri ile yapmak tercih edilir. Bu dosyalar, React bileşenlerine dahil edilir ve sınıf adları veya özel bileşenler ile ilişkilendirilir.

Örnek CSS dosyası (styles.css):

.my-component {
  color: blue;
  font-size: 16px;
}

React bileşeni (jsx):

import './styles.css';

function MyComponent() {
  return <div className="my-component">Bu metin mavi renkte ve 16px büyüklüğünde.</div>;
}

CSS Modülleri: CSS modülleri, stil tanımlamalarını bileşenlerle bağlamak için kullanılır ve CSS sınıf adı çakışmalarını önler. Her bileşen için benzersiz bir stil modülü oluşturulur.

Örnek stil modülü (styles.module.css):

.myComponent {
  color: blue;
  font-size: 16px;
}

React bileşeni (jsx):

import styles from './styles.module.css';

function MyComponent() {
  return <div className={styles.myComponent}>Bu metin mavi renkte ve 16px büyüklüğünde.</div>;
}

CSS-in-JS Yaklaşımları: React uygulamalarında, özellikle dinamik stillerle çalışırken CSS-in-JS kütüphaneleri kullanılır. Örneğin, styled-components veya emotion gibi kütüphanelerle bileşenlere özgü stil tanımlamaları yapabilirsiniz.

styled-components örneği:

import styled from 'styled-components';

const MyStyledComponent = styled.div`
  color: blue;
  font-size: 16px;
`;

function MyComponent() {
  return <MyStyledComponent>Bu metin mavi renkte ve 16px büyüklüğünde.</MyStyledComponent>;
}