React Styled Components

React uygulamaları için CSS’in gücünü kullanmayı kolaylaştıran bir kütüphanedir. Genellikle CSS kodunu ayrı bir dosyada yazıp, React component’lerine bu dosyayı import ederek kullanırız. Ancak Styled Components ile, CSS kodunu direkt olarak React component’leri içinde yazabilirsiniz. HTML’de <style></style> tag’ı kullanmak gibi düşünebilirsiniz.

CSS kodunu React component’lerinin içine yerleştirerek, React uygulamanızın daha düzenli, güvenli ve modüler olmasını sağlar. Bu, CSS kodunun tekrar kullanımını ve değiştirilmesini kolaylaştırır ve kod yapınızda daha anlaşılır hale getirir.

Mesela, Bir buton bileşeninde kullanılan stil özelliklerini Styled Components ile tanımlayabilirsiniz ve bu bileşeni, istediğiniz yerde kullanabilirsiniz.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #3e8e41;
  }
`;

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  );
}

import styled from 'styled-components';

const Link = styled.a`
  color: ${(props) => (props.color ? props.color : 'blue')};
  text-decoration: none;
  border-bottom: ${(props) => (props.underline ? '1px solid black' : 'none')};
`;

function App() {
  return (
    <div>
      <Link href="https://www.example.com/">Example link</Link>
      <Link href="https://www.example.com/" color="red">Red link</Link>
      <Link href="https://www.example.com/" underline>Underlined link</Link>
    </div>
  );
}

Kullanmaya neden ihtiyaç duyduk ?

Styled Components kullanılmasının bence en önemli nedeni, CSS ve React bileşenlerinin birleştirilmesini kolaylaştırmasıdır. Özellikle büyük ölçekli uygulamalar için, stil özelliklerinin React bileşenleri ile bütünleştirilmesi, kodun daha okunaklı ve sürdürülebilir olmasını sağlayabilir.

Ayrıca, bileşenlerinizi çok daha esnek ve dinamik hale getirebilirsiniz. Mesela, yukarıdaki örnekteki gibi, bileşenlerin prop’larına bağlı olarak stil özelliklerini değiştirebilirsiniz. Böylece, aynı bileşeni farklı bağlamlarda kullanabilirsiniz ve farklı görünümler elde edebilirsiniz. (ne kadar component based style ve design system için tam olarak uygun olmasa da… )

Styled Components kullanmak sayesinde

• CSS kodunuz daha modüler hale gelir, çünkü her bileşenin stil özellikleri, bileşenin kendisiyle birlikte tanımlanır.
• Stil özellikleri, bileşenlerin prop’larına bağlı olarak dinamik olarak değiştirilebilir.
• CSS kodunuzun tekrar kullanımı ve değiştirilmesi daha kolay olur.
• CSS ve React bileşenlerinin birleştirilmesi daha kolay hale gelir.

Ancak :

• Başlangıçta öğrenmesi biraz zaman alabilir.
• CSS stil özelliklerini, bileşenlerin içinde tanımladığınız için, bazı durumlarda kodunuz biraz daha uzun hale gelebilir.

Bazen CSS ve React’i ayrı tutmanın dezavantajları da olabilir. Mesela, ayrı tuttuğunuz CSS dosyaları, uygulama büyüdükçe yönetilmesi zor bir hale gelebilir. Ayrıca, CSS kodunuzu React bileşenlerinden ayırdığınızda, bileşenlerinize bağlı olarak stil özelliklerini dinamik olarak değiştirmeniz biraz daha zor olabilir.

Kısacası, Styled Components kullanmak React uygulamanızın CSS kullanımını kolaylaştırır ve daha okunaklı, esnek ve modüler kod yazmanıza yardımcı olur.

Styled Components’i kullanmaya karar vermeden önce, ihtiyaçlarınızı ve uygulamanızın gereksinimlerini göz önünde bulundurmanız gerekiyor.

Günün sonunda , CSS dosyaları ile React bileşenlerini ayrı tutmak, bir muzun kabuğunu ayırmak gibi bir iş olabilir. Dikkat etmek gerekir.