React, web uygulamaları oluşturmak için popüler bir JavaScript kütüphanesidir. React uygulamalarında stil uygulamak için birçok farklı yaklaşım vardır. Bu yazıda, React uygulamalarında inline CSS ve dinamik koşullu inline CSS ile dinamik koşullu class eklemeyi örneklerle açıklayacağız.

Inline CSS

React'ta inline CSS, stil özellikleri doğrudan JSX kodu içinde tanımlanır. Bu yaklaşım, küçük projelerde ve basit stil gereksinimlerinde yararlıdır. Ancak büyük projelerde inline CSS kullanmak, stil yönetimini zorlaştırabilir.

Örneğin, bir

öğesi için arka plan rengini belirlemek istediğimizi varsayalım:

import React from 'react';

function App() {
  return (
    
      Bu bir örnek metin.
    
  );
}

export default App;

Burada, stil özellikleri style özniteliği içinde JavaScript nesnesi olarak tanımlanmaktadır. Bu nesnenin özellikleri, CSS özellikleri ile aynıdır, ancak özelliği tanımlamak için camelCase sözdizimi kullanılır.

Dinamik Koşullu Inline CSS

Bir React uygulamasında, öğelerin stil özellikleri genellikle sabit değildir. Bazen, özellikleri belirli koşullara göre değişebilir. Bu durumda, dinamik koşullu inline CSS kullanmak yararlı olabilir.

Örneğin, bir

öğesi için arka plan renginin, bir koşula bağlı olarak değişmesini istediğimizi varsayalım:

import React, { useState } from 'react';

function App() {
  const [isBlue, setIsBlue] = useState(false);

  const handleClick = () => {
    setIsBlue(!isBlue);
  };

  return (
    
      {isBlue ? 'Mavi' : 'Kırmızı'}
    
  );
}

export default App;

Burada, useState hook'u kullanarak isBlue adında bir state değişkeni tanımladık. Bu değişken, handleClick fonksiyonu tarafından değiştirilir. isBlue değeri,

öğesinin arka plan rengini belirlemek için kullanılır.

style özelliği, isBlue değerine göre değişir. Böylece, kullanıcı

öğesine tıkladığında, arka plan rengi değişir.

Dinamik Koşullu Class Ekleme

React uygulamalarında, öğelerin stil özellikleri bazen inline olmayabilir. Bu durumlarda, dinamik koşullu class eklemek yararlı olabilir. Dinamik koşullu class eklemek, stil yönetimini kolaylaştırabilir ve CSS sınıflarını yeniden kullanmanıza olanak tanır.

Örneğin, bir

öğesi için farklı sınıflar kullanarak farklı stiller uygulamak istediğimizi varsayalım:

import React, { useState } from 'react';
import './styles.css';

function App() {
  const [isBlue, setIsBlue] = useState(false);

  const handleClick = () => {
    setIsBlue(!isBlue);
  };

  return (
    
      {isBlue ? 'Mavi' : 'Kırmızı'}
    
  );
}

export default App;

Burada, styles.css dosyasında blueBox ve redBox adında iki farklı sınıf tanımladık.

öğesi, className özelliği ile blueBox veya redBox sınıfını alır.

Bu sayede,

öğesi farklı stillere sahip olur ve kullanıcı tıkladığında sınıf değişir.

React uygulamalarında stil yönetimi, inline CSS, dinamik koşullu inline CSS ve dinamik koşullu class eklemek gibi farklı yaklaşımlar kullanılarak gerçekleştirilebilir. Inline CSS, küçük projelerde ve basit stil gereksinimlerinde kullanışlıdır. Dinamik koşullu inline CSS, özelliklerin belirli koşullara göre değiştiği durumlarda yararlıdır. Dinamik koşullu class eklemek ise, stil yönetimini kolaylaştırır ve CSS sınıflarını yeniden kullanmanıza olanak tanır.

Styled Components Nedir?

Styled Components, React uygulamalarında stil yönetimini sağlayan bir kütüphanedir. Bu kütüphane, stil tanımlamalarını JavaScript koduna entegre ederek, stil yönetimini modüler ve kolay hale getirir. Styled Components, CSS sınıfları yerine, her bileşen için benzersiz bir stil adı verir ve bu stil adını bileşenler arasında yeniden kullanabilirsiniz.

Styled Components, özellikle büyük React uygulamalarında stil yönetimini kolaylaştırır. Büyük uygulamalarda, stil tanımlamalarının düzenli ve tutarlı bir şekilde yönetilmesi önemlidir. Styled Components, JSX içinde stil tanımlamanıza ve bileşenler arasında stil paylaşmanıza olanak tanıyan bir dizi kullanışlı araç sunar.

Styled Components Nasıl Kullanılır?

Styled Components, React uygulamanızda kullanmak için öncelikle kütüphaneyi yüklemeniz gerekiyor:

npm install styled-components

Daha sonra, kullanacağınız bileşenleri styled fonksiyonu ile sarmalamanız gerekiyor:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

function App() {
  return (
    
      Click Me!
    
  );
}

export default App;

Yukarıdaki örnekte, Button bileşeni styled fonksiyonu ile sarmalanmıştır. Stil tanımlamaları, arka tarafta bir CSS dosyası olarak tanımlanır. Bu örnekte, background-color, color, font-size, padding, border, border-radius ve cursor gibi bir dizi stil özelliği tanımlanmıştır.

Styled Components, CSS özellikleri arasında dinamik değişkenler tanımlamak için ${} sözdizimini kullanabilirsiniz:

const Button = styled.button`
  background-color: ${props => props.primary ? "#008CBA" : "white"};
  color: ${props => props.primary ? "white" : "#008CBA"};
  font-size: 16px;
  padding: 10px 20px;
  border: ${props => props.primary ? "none" : "1px solid #008CBA"};
  border-radius: 4px;
  cursor: pointer;
`;

function App() {
  return (
    
      Primary Button
      Secondary Button
    
  );
}
export default App;

Yukarıdaki örnekte, Button bileşenine primary prop'u verilerek, düğmenin arka plan rengi ve metin rengi değiştirilmiştir. border stil özelliği de primary prop'unun değerine göre değiştirilir.

Styled Components ayrıca css fonksiyonu kullanarak stil özelliklerini yeniden kullanmanızı da sağlar:

const ButtonBase = `
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
`;

const PrimaryButton = styled.button`
  ${ButtonBase}
  background-color: #008CBA;
  color: white;
  border: none;
`;

const SecondaryButton = styled.button`
  ${ButtonBase}
  background-color: white;
  color: #008CBA;
  border: 1px solid #008CBA;
`;

function App() {
  return (
    
      Primary Button
      Secondary Button
    
  );
}

export default App;

Yukarıdaki örnekte, ButtonBase adlı bir stil tanımlaması oluşturulmuştur. Bu stil tanımlaması, font-size, padding, border-radius ve cursor gibi stil özelliklerini içerir. Daha sonra, PrimaryButton ve SecondaryButton bileşenleri, ButtonBase stil tanımlamasını yeniden kullanarak, ilgili özellikleri ayarlayabilir.

Styled Components, React uygulamalarında stil yönetimini kolaylaştıran bir kütüphanedir. Bu kütüphane, JSX içinde stil tanımlamayı ve bileşenler arasında stil paylaşmayı mümkün kılarak, React uygulamalarının modülerliğini artırır. Styled Components ayrıca dinamik değişkenler ve yeniden kullanılabilir stil tanımlamaları gibi kullanışlı özellikler sunar.

CSS Modules Nedir?

CSS Modules, CSS dosyalarını modüller halinde kullanabilmenizi sağlayan bir teknolojidir. Bu teknoloji, CSS dosyalarındaki sınıfları yerel kapsama alanlarına taşır ve böylece bir bileşenin stil özellikleri, diğer bileşenlerin stil özelliklerinden etkilenmez.

CSS Modules kullanırken, her bir CSS dosyası için bir modül oluşturulur. Modüllerdeki sınıflar, otomatik olarak benzersiz bir isim alanıyla örtülür. Böylece, farklı modüllerdeki sınıflar arasında isim çatışmaları oluşmaz.

CSS Modules Kullanımı

CSS Modules kullanarak React uygulamalarında stil yönetimi yapmak oldukça kolaydır. İlk olarak, stil dosyalarınızı .module.css uzantısıyla kaydedin. Bu uzantı, dosyanın bir CSS Modülü olduğunu belirtir.

Örneğin, aşağıdaki gibi bir Button.module.css dosyası oluşturabilirsiniz:

.primaryButton {
  background-color: #008CBA;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.secondaryButton {
  background-color: white;
  color: #008CBA;
  border: 1px solid #008CBA;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

Bu dosya, primaryButton ve secondaryButton adlı iki sınıf içerir.

Daha sonra, bu stil dosyasını React bileşeninde kullanabilirsiniz. Bunu yapmak için, import anahtar kelimesini kullanarak stil dosyasını bileşen dosyasına dahil edin ve CSS sınıflarını bileşene className özelliğiyle ekleyin.

import React from 'react';
import styles from './Button.module.css';

function Button(props) {
  const { primary, secondary, children } = props;
  let className = '';
  if (primary) {
    className = styles.primaryButton;
  } else if (secondary) {
    className = styles.secondaryButton;
  }

  return {children};
}

export default Button;

Yukarıdaki örnekte, import anahtar kelimesi kullanılarak Button.module.css dosyası bileşen dosyasına dahil edilmiştir. Ardından, bileşenin className özelliği, primary veya secondary prop'larının değerlerine göre değişen bir değer alır.

Bu yöntem, bileşenlerin stil özelliklerini dinamik olarak belirlemenizi sağlar. Ayrıca, stil özelliklerinin bileşen koduna gömülmesi, diğer CSS yaklaşımlarından daha güçlü bir izolasyon sağlar.

CSS Modules ile, bileşenlerin stil özelliklerini kolayca yönetebilir ve değiştirebilirsiniz. Örneğin, Button bileşenindeki primaryButton stil özelliklerini değiştirmek istediğinizde, Button.module.css dosyasındaki sınıfı güncellemeniz yeterlidir. Bu değişiklik, yalnızca Button bileşenini etkileyecektir ve diğer bileşenlerin stil özelliklerini etkilemeyecektir.

CSS Modules Avantajları

CSS Modules'in birkaç avantajı vardır:

• Stil özellikleri, bileşen koduna gömülür ve diğer bileşenlerin stil özelliklerini etkilemez.
  • Sınıflar, otomatik olarak benzersiz bir isim alanıyla örtülür ve böylece isim çatışmaları önlenir.
  • Stil dosyaları modüler hale getirilir ve yönetimi daha kolay hale gelir.
  • CSS dosyalarında kullanılan herhangi bir CSS seçicisi, yalnızca ilgili bileşenin stil özelliklerine uygulanır.

CSS Modules, React uygulamalarında stil yönetimi yapmanın kolay ve etkili bir yoludur. Bu teknoloji, bileşenlerin stil özelliklerini izole etmelerine ve global isim çatışmalarını önlemelerine olanak tanır. Bu nedenle, React uygulamalarında CSS Modules kullanarak, daha sürdürülebilir ve yönetilebilir bir stil yönetimi sağlayabilirsiniz.