Özet - Stil

CSS Modules ile stilli bir fiyat etiketi bileşeni yazarsın.

Özet - Stil

Bu grupta üç stil yöntemi gördün: className + CSS (global, basit), CSS Modules (kapsamlı, güvenli) ve inline style (dinamik, hızlı).

JSX'te class değil className; inline nesnede camelCase. Modules çakışmayı önler; inline state'e göre değişir.

İleride styled-components ve tema yönetimini göreceğiz; şimdilik bu üçü çoğu işi çözer.

Uygulama Stil özet görevi

Aşağıdaki iskeleti tamamla. StatusBadge bileşeni yaz; useState'i içe aktar. const [active, setActive] = useState(false); tanımla. <span className={active ? "on" : "off"}>{active ? "Açık" : "Kapalı"}</span> döndürsün. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function StatusBadge() {
  const [active, setActive] = useState(false);
  return <span className={active ? "on" : "off"}>{active ? "Açık" : "Kapalı"}</span>;
}

export default StatusBadge;

Kendini test et

Aşağıdakilerden hangisi yanlış?
```
CSS dashes become camelCase.
```
- JSX'te className kullanılır
- inline stilde background-color yazılır
- inline dinamik değer alır
- Modules çakışmayı önler
Cevabı göster

inline stilde background-color yazılır — inline stilde backgroundColor (camelCase) yazılır.
Özet - Stil: kavramları eşleştir

className

CSS sınıfı
styles.x

Modules sınıfı
style={{}}

Inline nesne
camelCase

Özellik adı

Sıradaki ders: styled-components nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler