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.