Inline stiller

style özniteliği ile nesne tabanlı inline stil yazmayı öğrenirsin.

Inline stiller

Inline stil, doğrudan style özniteliğine nesne olarak verilir: <div style={{color: "red"}}>. Çift süslü parantez unutulmaz.

Değerler JavaScript olduğu için background-color değil backgroundColor yazılır (camelCase). Sayı değerleri piksel sayılır: padding: 8.

Inline stiller hızlı prototip içindir; büyük projelerde CSS veya Modules tercih edilir.

Dinamik stil

Inline stillerin gücü, değerleri değişkene bağlayabilmendir: style={{color: isError ? "red" : "green"}}. Böylece state'e göre renk değişir.

Aynı şeyi className ile de yapabilirsin: className={isError ? "err" : "ok"}. Hangisi daha temizse onu seçersin.

Inline stiller pseudo-sınıfları (:hover) desteklemez; onlar için CSS gerekir.

Uygulama Dinamik renkli kutu

Aşağıdaki iskeleti tamamla. AlertBox bileşeni yaz; useState'i içe aktar. const [err, setErr] = useState(true); tanımla. <div style={{color: err ? "red" : "green"}}>Durum</div> döndürsün. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function AlertBox() {
  const [err, setErr] = useState(true);
  return <div style={{ color: err ? "red" : "green" }}>Durum</div>;
}

export default AlertBox;

Kendini test et

Inline stilde arka plan rengi nasıl yazılır?
```
CSS dashes become camelCase.
```
- backgroundColor
- bgcolor
- background-color
- background
Cevabı göster

backgroundColor — JavaScript nesne anahtarı camelCase olur.

Inline stiller: eksik parçayı tamamla

<div style={{ ____: "red" }}>Dikkat</div>

Cevabı göster

<div style={{ color: "red" }}>Dikkat</div>

Inline stiller: kavramları eşleştir

style={{}}

Inline nesne
backgroundColor

camelCase
padding: 8

Piksel sayı
:hover

Inline yok

Sıradaki ders: Özet - Stil

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler