Props ile stil

Bir styled bileşene prop geçip stili değiştirmeyi öğrenirsin.

Props ile stil

styled-components bileşenleri props alabilir. Şablon içinde ${props => props.color} ile props'a göre dinamik değer üretirsin.

Böylece <Btn color="red" /> yazınca düğme kırmızı olur. Aynı bileşen farklı props ile farklı renklerde çalışır.

Bu, bileşenlerin yeniden kullanılabilir ve esnek olmasını sağlar. Tek bir düğme bileşeni farklı renk ve boyutlarda onlarca yerde çalışır; bu da kod tekrarını ciddi biçimde azaltır.

Koşullu stil

Props'a göre stilleri koşullu da yazabilirsin: ${props => props.primary ? "blue" : "gray"}. Böylece tek bileşen hem birincil hem ikincil düğme olur.

Bu, çok sayıda sınıf adı yazmaktan kurtarır; mantık tek yerde toplanır.

İleride tema ile renkleri merkezi yapacağız; şimdilik props yeter.

Uygulama Renkli düğme

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

Örnek çözümü göster

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

function App() { return <ColorButton color="green">Tamam</ColorButton>; }
export default ColorButton;

Kendini test et

Şablon içinde props'a nasıl erişilir?
```
A dynamic value is made with a function inside ${}.
```
- ${props.x}
- this.props.x
- props.x
- ${props => props.x}
Cevabı göster

${props => props.x} — ${} içinde fonksiyon ile props okunur.

Props ile stil: eksik parçayı tamamla

color: ${props => props.____};

Cevabı göster

color: ${props => props.color};

Props ile stil: kavramları eşleştir

${props => ...}

Dinamik değer
color="red"

Prop geçme
props.primary ?

Koşul
<Btn />

Kullanım

Sıradaki ders: Tema kullanımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler