📌 Styled Components – Temel Kavramlar ve Kullanım

styled-components, React uygulamalarında komponent bazlı stil oluşturmayı sağlayan bir CSS-in-JS kütüphanesidir. Bu yöntemle CSS doğrudan komponentlerin içine gömülür ve stil yönetimi daha modüler, okunabilir ve tekrar kullanılabilir hale gelir.

Başlamak için:

npm i styled-components

1. Temel Kullanım ve Bileşen Oluşturma

• styled.tag ile bir HTML elementi stil verilebilir.
• Oluşturulan bileşenlere direkt onClick gibi eventler eklenebilir.

import styled from "styled-components";

const H1 = styled.h1`
  font-size: 30px;
  font-weight: 600;
  background-color: yellow;
`;

const Button = styled.button`
  font-size: 1.4rem;
  padding: 1.2rem 1.6rem;
  font-weight: 500;
  border-radius: 7px;
  background-color: purple;
  color: white;
`;

const App = () => (
  <div>
    <H1>The Wild Oasis</H1>
    <Button onClick={() => alert("Alert!")}>Check In</Button>
  </div>
);

export default App;

2. attrs ile HTML Özellikleri ve Input Kullanımı

• attrs metodu ile bileşenlere varsayılan HTML özellikleri eklenebilir.
• Örnek: type="file" ile input bileşeni

const FileInput = styled.input.attrs({ type: "file" })`
  border: none;
`;

3. as Prop'u ile HTML Elementini Değiştirme

• as prop'u sayesinde stil verilmiş bir bileşen farklı bir HTML tag ile render edilebilir.
• Semantik veya özel durumlar için kullanışlıdır.

<Heading as="h1">The Wild Oasis</Heading>