CSS-in-JS: Styled-components ve Emotion
Bileşen stillerini styled-components ile etiketli şablon dizeleri veya Emotion ile css prop'u olarak yazın ve dinamik stiller için props kullanın.
CSS-in-JS: Styled-components ve Emotion, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
CSS-in-JS Nedir
CSS-in-JS, bileşen stillerini doğrudan JavaScript/TypeScript içinde yazar. Stiller bileşenlerle aynı yerde bulunur, props'tan gelen dinamik değerleri destekler ve otomatik olarak kapsamlandırılır. En popüler iki kitaplık styled-components ve Emotion'dır.
Styled-components Temelleri
Stilli bileşenleri tanımlamak için etiketli şablon dizelerini kullanın. Sonuç, stilleri uygulanmış bir HTML öğesi oluşturan React bileşenidir.
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? '#6366f1' : 'white'};
color: ${props => props.primary ? 'white' : '#6366f1'};
padding: 8px 16px;
border: 2px solid #6366f1;
border-radius: 4px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
`;
<Button primary>Primary</Button>
<Button>Outline</Button>Emotion — css Özelliği
Emotion'ın css özelliği, stilleri herhangi bir JSX öğesine uygular. @emotion/react pragma'sı veya Babel ön ayarı gerekir.
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
function Card({ featured }: { featured?: boolean }) {
return (
<div css={css`
padding: 16px;
border-radius: 8px;
border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
`}>
Content
</div>
);
}Props'tan Dinamik Stiller
Her iki kitaplık da stilleri hesaplamak için props okuyabilir. Statik CSS'e kıyasla temel avantajları budur; sınıf değiştirmek gerekmez.
ThemeProvider ile Tema Oluşturma
Styled-components ve Emotion, tema değerlerini tüm stilli bileşenlere aktaran bir ThemeProvider'ı destekler.
import { ThemeProvider } from 'styled-components';
const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
// Access in styled component:
const Card = styled.div`
background: ${props => props.theme.colors.bg};
padding: ${props => props.theme.space.md}px;
`;Stilli Bileşenleri Genişletme
Stilleri yinelemeden bir çeşit oluşturmak için mevcut bir stilli bileşeni genişletin.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Genel Stiller
Gövde stilleri ve sıfırlamalar gibi genel CSS için createGlobalStyle (styled-components) veya Global (Emotion) kullanın.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>CSS-in-JS'in Çalışma Zamanı Maliyeti
CSS-in-JS kitaplıkları, stilleri JavaScript aracılığıyla çalışma zamanında ekler. Bu, stilleri ayrıştırmak ve eklemek için CPU maliyeti yaratır; ayrıca JavaScript paketinin boyutunu artırır. Çalışma zamanı olmayan alternatifler (vanilla-extract, linaria), derleme zamanında statik CSS oluşturur.
Çalışma Zamanı Olmayan Alternatifler
vanilla-extract: stilleri TypeScript'te yazılır ve statik CSS'e derlenir. linaria: CSS-in-JS söz dizimi CSS Modules'a derlenir. Her ikisi de çalışma zamanı yükü olmadan CSS-in-JS kullanım kolaylığını sunar.
styled-components ile TypeScript
Tam tür denetimli temalar için bir ThemeType tanımlayın ve styled-components içindeki DefaultTheme arayüzünü genişletin.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}CSS-in-JS Ne Zaman Seçilmeli
CSS-in-JS şu durumlar için mükemmeldir: çalışma zamanındaki JavaScript değerleriyle yönlendirilen dinamik stiller, güçlü tema gereksinimleri olan tasarım sistemleri ve JS öncelikli iş akışlarını tercih eden ekipler. Çalışma zamanı maliyeti, performans açısından kritik olmayan kullanıcı arayüzleri için genellikle kabul edilebilirdir.
Hızlı Kontrol
Statik CSS çözümleriyle karşılaştırıldığında çalışma zamanında çalışan CSS-in-JS kitaplıklarının temel ödünleşimi nedir?
Özet: CSS-in-JS
Styled-components: etiketli şablon dizeleri kullanır ve stilli bir React öğesi oluşturur. Emotion: css özelliği veya stillendirme API'si. Props'tan gelen dinamik stiller sınıf değiştirme gereksinimini ortadan kaldırır. ThemeProvider tema değerlerini aktarır. Genel CSS için createGlobalStyle kullanılır. Çalışma zamanı maliyeti temel ödünleşimdir. Çalışma zamanı olmayan alternatifler: vanilla-extract, linaria.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“CSS-in-JS: Styled-components ve Emotion” dersi ücretsiz mi?
Evet — “CSS-in-JS: Styled-components ve Emotion” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“CSS-in-JS: Styled-components ve Emotion” dersinde ne öğreneceğim?
Bileşen stillerini styled-components ile etiketli şablon dizeleri veya Emotion ile css prop'u olarak yazın ve dinamik stiller için props kullanın. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 3. dersidir.
“CSS-in-JS: Styled-components ve Emotion” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- BEM Metodolojisi: Block Element Modifier
- CSS Modülleri: Kapsamlı Sınıf Adları
- CSS-in-JS: Styled-components ve Emotion
- Tailwind CSS: Önce Yardımcı Sınıflar Yaklaşımı