Inline stiller
- React kursu
- Başlangıç
- Ders 55/84
- 4 dk
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.
Başlangıç kodu
import { useState } from "react";
// AlertBox bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function AlertBox() {
const [err, setErr] = useState(true);
return <div style={{ color: err ? "red" : "green" }}>Durum</div>;
}
export default AlertBox;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Inline stilde arka plan rengi nasıl yazılır?
CSS dashes become camelCase.- backgroundColor Doğru cevap
- bgcolor
- background-color
- background
Açıklama: JavaScript nesne anahtarı camelCase olur.
2 Inline stiller: eksik parçayı tamamla
<div style={{ ____: "red" }}>Dikkat</div><div style={{ color: "red" }}>Dikkat</div>Açıklama: color anahtarı metin rengini belirler.
3 Inline stiller: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
style={{}} |
Inline nesne |
backgroundColor |
camelCase |
padding: 8 |
Piksel sayı |
:hover |
Inline yok |