⊗jsrtPmSyCMF 108 of 112 menu

CSS modülleri ile stil öğrenmeye devam React

Uygulamamız buttons üzerinde çalışmaya devam edelim. Şimdi, başlangıçta src klasöründe zaten oluşturulmuş olan ana bileşen App ile ilgileneceğiz. İçinde iki div, bir başlık ve bir buton olacak.

App.css dosya adını, kural gereği App.module.css olarak değiştirelim, içini temizleyelim ve içinde etiketler için birkaç CSS stil sınıfı oluşturalım:

.app { display: flex; flex-direction: column; width: 300px; border: 1px solid brown; padding: 10px; } .wrapper { display: flex; justify-content: space-around; } .title { text-align: center; margin-top: 10px; }

Şimdi App.js dosyasının içeriğini temizleyelim. Ardından React bileşeni Buttons ve stilleri App.module.css dosyasından içe aktaralım. Etiketlerimizi yazalım, onlara stiller uygulayalım ve ayrıca React bileşeni Buttons'ı yerleştirelim:

import classes from "./App.module.css"; import Buttons from "./components/Buttons"; function App() { return ( <div class={classes.app}> <h2 class={classes.title}>CSS Module Buttons</h2> <div class={classes.wrapper}> <Buttons /> </div> </div> ); } export default App;

App.module.css dosyasından içe aktardığımız stilleri içeren nesnenin adı olarak classes kelimesini kullandık. Önceki durumda olduğu gibi, bu nesneyi sizin için uygun olan şekilde adlandırabilirsiniz.

Birkaç küçük adım kaldı. index.css dosya adını kural gereği index.module.css olarak değiştirelim ve index.js dosyasında içe aktarma satırını değiştirmeyi unutmayalım:

import "./index.css";

Şu satırla:

import "./index.module.css";

Şimdi tarayıcıda uygulamamızın çalışma sonucunu görebiliriz.

Tarayıcının geliştirici panelinde oluşturulmuş HTML'i açarsanız, her bileşenin kendi benzersiz sınıflarının oluşturulduğunu göreceksiniz. Böylece, artık bileşenlerin sınıfları arasındaki çakışmalar konusunda endişelenmemize gerek kalmıyor.

Önemli olan bir diğer nokta, CSS modüllerinin sıradan harici CSS dosyalarını içe aktarmayı yasaklamamasıdır.

Dersin teorisini takip ederek, önceki dersteki görevlerde oluşturduğunuz inputs uygulamanızın React bileşeni App'yi temizleyin ve ayrıca içine, oluşturduğunuz Inputs bileşenini stilize edilmiş bir div içine yerleştirin. App'ye stilize edilmiş bir başlık ekleyin. Tüm bunları başka bir div içine koyun. React bileşeni App'nin etiketleri için stilleri App.modules.css dosyasına yazın.

Hepsini bir araya getirin, kalan dosyaları doğru şekilde bağlayın ve inputs uygulamanızı başlatın.

Türkçe
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenЎзбекOʻzbekTiếng Việt
Web sitesinin çalışması, analiz ve kişiselleştirme için çerezleri kullanıyoruz. Veri işleme, Gizlilik Politikası'na uygun olarak gerçekleşir.
tümünü kabul et özelleştir reddet