CSS Academy · Ders

Styled-components: Etiketli Şablon Değişmezleri

styled-components kütüphanesiyle etiketli şablon değişmezlerini kullanarak stillendirilmiş React bileşenleri oluşturun.

Styled-components: Etiketli Şablon Değişmezleri, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Styled-components nedir?

styled-components, etiketli şablon değişmezlerini kullanarak CSS'yi doğrudan JavaScript dosyalarının içinde yazmanızı sağlayan React için bir CSS-in-JS kütüphanesidir. Her stillendirilmiş bileşene otomatik olarak kapsamı benzersiz sınıf adları atanır.

Etiketli Şablon Değişmezleri

JavaScript'teki etiketli şablon değişmezleri, bir işlevin şablon dizesini işlemesini sağlar. styled-components bunu CSS'yi ayrıştırmak için kullanır:

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

Özelliklerle Dinamik Stiller

Dinamik stillendirme için şablon değişmezi içinde bileşen özelliklerine erişin:

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

CSS Özel Özelliklerine Alternatif

Daha basit dinamik değerler için özelliklerle yönlendirilen mantık yerine CSS özel özelliklerini tercih edin; bu yaklaşım daha yüksek performans sağlar ve JavaScript değer yerleştirmelerini azaltır:

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

Stilleri Genişletme

Stil eklemek için mevcut bir stillendirilmiş bileşeni genişletin:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

İç İçe Yazım ve & Seçicisi

styled-components, üst öğeye başvurmak için & kullanarak Sass benzeri iç içe yazımı destekler:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

createGlobalStyle kullanarak genel stilleri (sıfırlamalar, temel stiller) tanımlayın:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

styled-components, bileşenlerde theme belirteçlerine erişmek için bir ThemeProvider sunar:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>

Performansla İlgili Hususlar

styled-components, çalışma zamanında sınıf adları üretir. Performans açısından kritik uygulamalarda Babel plugin'ini kullanarak statik çıkarma yapmayı veya Vanilla Extract ya da CSS Modules gibi çalışma zamanı olmayan alternatiflere geçmeyi değerlendirin.

Sunucu Taraflı İşleme

styled-components, stillendirilmemiş içerik parlamasını önlemek üzere sunucu işleme sırasında stilleri toplamak ve eklemek için ServerStyleSheet API'siyle SSR'yi destekler.

Alternatifler ve Ekosistem

styled-components ekosisteminde şunlar bulunur: emotion (benzer API), linaria (çalışma zamanı yok), Vanilla Extract (tür güvenli) ve Panda CSS (yardımcı program öncelikli). Her biri çalışma zamanı ek yükü, DX ve performans arasında farklı ödünleşimler sunar.

Hızlı Kontrol

styled-components, bileşenler arasındaki sınıf adı çakışmalarını nasıl önler?

Özet

styled-components, React bileşenlerinin yanında CSS tanımlamak için etiketli şablon değişmezlerini kullanır. Özellikler, JavaScript değer yerleştirmeleri aracılığıyla dinamik stilleri yönlendirebilir. Bileşenler ThemeProvider aracılığıyla genişletilebilir, iç içe yazılabilir ve temaya duyarlı hale getirilebilir. Üretimde statik çıkarma ve sunucu taraflı işleme desteği için Babel plugin'ini değerlendirin. Çalışma zamanı olmayan alternatifler için Vanilla Extract veya CSS Modules'ü değerlendirin.

Sıkça Sorulan Sorular

“Styled-components: Etiketli Şablon Değişmezleri” dersi ücretsiz mi?

Evet — “Styled-components: Etiketli Şablon Değişmezleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Styled-components: Etiketli Şablon Değişmezleri” dersinde ne öğreneceğim?

styled-components kütüphanesiyle etiketli şablon değişmezlerini kullanarak stillendirilmiş React bileşenleri oluşturun. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Styled-components: Etiketli Şablon Değişmezleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Styled-components: Etiketli Şablon Değişmezleri
Emotion: css() ve styled()
CSS Modules: Kapsamlandırılmış Stiller
Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS

← CSS Academy Sayfasına Dön