styled-components nedir?

styled-components ile JS içinde stil yazmanın temelini öğrenirsin.

styled-components nedir?

styled-components, stilleri JavaScript içine gömer. Bir bileşeni styled.button\`...\` biçiminde tanımlar; içine CSS yazarsın.

Sonuç, kendine özgü sınıf adlarıyla izole bir bileşendir; className çakışması olmaz. Stil ve işaretleme tek yerde durur.

Bu yöntem "CSS-in-JS" ailesindendir; tema ve dinamik props için güçlüdür. Kurulum için paketi yüklersin.

Şablon yazımı

styled-components, JavaScript şablon dizisi (template literal) kullanır. Geri tırnak (`) arasına CSS yazarsın; bu, normal CSS söz dizimidir.

Sonuç bir React bileşenidir; <Btn /> gibi kullanırsın. Her render'da sınıf adı korunur; izolasyon garantidir.

İleride bu şablona props göndereceğiz; renkleri dinamik yapacağız.

Uygulama Stilli düğme

Aşağıdaki iskeleti tamamla. BlueButton adında, styled.button\`color: blue;\` ile tanımlı bir stilli bileşen oluştur. <BlueButton>Gönder</BlueButton> döndür. Dışa aktar.

Örnek çözümü göster

const BlueButton = styled.button`color: blue;`;

function App() { return <BlueButton>Gönder</BlueButton>; }
export default BlueButton;

Kendini test et

styled-components hangi yazıma girer?
```
CSS is written inside a JavaScript file.
```
- inline stil
- CSS Modules
- CSS-in-JS
- global CSS
Cevabı göster

CSS-in-JS — Stilli bileşen JS içinde tanımlanır.

styled-components nedir: eksik parçayı tamamla

const Btn = styled.button`____`

Cevabı göster

const Btn = styled.button`color: blue;`

styled-components nedir: kavramları eşleştir

styled.button`...`

Stilli bileşen
`...`

Şablon dizi
<Btn />

Kullanım
CSS-in-JS

Aile

Sıradaki ders: Props ile stil

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler