Özet - styled-components

Temalı bir buton ailesi (primary, ghost) yazarsın.

Özet - styled-components

Bu grupta CSS-in-JS dünyasına girdin. styled-components, stilleri JS içine gömer; şablon dizi içinde CSS yazarsın ve bir bileşen elde edersin.

Props ile dinamik, tema ile merkezi stiller yaparsın. Karanlık/aydınlık mod tema ile kolaydır. Tüm stiller izole ve çakışmasızdır.

Projede tutarlı bir tasarım dili için tema yaklaşımı güçlü bir araçtır.

Uygulama styled özet görevi

Aşağıdaki iskeleti tamamla. DangerButton adında stilli bileşen oluştur; styled.button\`color: ${props => props.color};\` ile tanımla. <DangerButton color="red">Sil</DangerButton> döndür. Dışa aktar.

Örnek çözümü göster

const DangerButton = styled.button`color: ${props => props.color};`;

function App() { return <DangerButton color="red">Sil</DangerButton>; }
export default DangerButton;

Kendini test et

Aşağıdakilerden hangisi yanlış?
```
A theme centralizes colors.
```
- styled.button`...` bileşen üretir
- tema gereksizdir, asla kullanılmaz
- ThemeProvider tema yayar
- props ile dinamik stil olur
Cevabı göster

tema gereksizdir, asla kullanılmaz — Tema güçlü bir araçtır; tutarlı tasarım için kullanılır.
Özet - styled-components: kavramları eşleştir

styled.button

Bileşen üretir
${props => ...}

Dinamik değer
ThemeProvider

Tema yayar
props.theme

Tema erişimi

Sıradaki ders: useReducer nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler