Stilli bileşenler gibi JS içinde CSS kitaplıkları son yıllarda daha popüler hale geldi. CSS'yi bileşen düzeyine kadar kapsüllerler ve yeniden kullanılabilir stiller tanımlamak için JavaScript kullanmanıza izin verirler.

Tarz bileşenlerini kullanarak, React'in zaten güçlendirdiği bileşen odaklı mimariyi koruyabilirsiniz. Ama kütüphanenin de bazı dezavantajları var.

Tarz Bileşenleri Nasıl Çalışır?

bu tarz bileşenler JS içinde CSS kitaplığı, bileşen dosyalarınızın içine CSS yazmanıza olanak tanır. Sözdizimi CSS ile aynıdır, bu nedenle alınması oldukça kolaydır. Saf CSS'den uzak durma eğiliminde olan JavaScript geliştiricileri için mükemmel bir orta yol.

Nasıl çalıştığını görmek için, bir h1 öğesi oluşturan aşağıdaki Başlık bileşenini göz önünde bulundurun.

const Başlık = tarz.h1`
yazı Boyutu: 1.5em;
 metin hizalama: merkez;
 kırmızı renk;
`;

Bu bileşeni diğer React bileşenleri gibi kullanabilirsiniz.

const Ana Sayfa = () => {
dönüş (
<Başlık>Stil sahibi bir bileşen başlığı</Title>
	)
}

Ayrıca çok güçlü çünkü sahne ve durumla çalışmayı kolaylaştırıyor.

instagram viewer

Örneğin, bu bileşenin rengi ve arka planı, aksesuarlara bağlıdır.

içe aktarmak tarz itibaren "tarz bileşenleri";
const Düğme = tarz.düğme`
dolgu malzemesi: 0.8rem 1.6rem;
 arka plan rengi: ${(sahne) => (props.birincil? "mor": "beyaz")};
 sınır: 1piksel katı #00000;
 renk: ${(sahne) => (props.birincil? "beyaz": "mor")};
`;
ihracatvarsayılanişlevEv() {
 dönüş <Düğme birincil>Öncelik</Button>
}

Tarzlı bileşenlerle, sahne malzemelerini CSS'ye manuel olarak iletmenize gerek yoktur. Bileşenden gelen verilere bağlı olan yazma stillerini basitleştirerek otomatik olarak kullanılabilir.

Tarz Bileşenleri Kullanmanın Artıları

Stil bileşenleri kitaplığını kullanmanın bazı avantajları şunlardır.

CSS Özgüllük Sorunlarını Çözer

Stile sahip bileşenler, CSS'yi bir bileşenin içine yerleştirdiği için özgünlük sorunlarını ortadan kaldırır. Bu, sınıf adlarının çakışması veya sınıf adı çakışmaları nedeniyle kullanıcı arayüzünüzün bir karmaşaya dönüşmesi konusunda endişelenmenize gerek olmadığı anlamına gelir.

Bileşenlerin İçine CSS Yazmanızı Sağlar

Düğme bileşeni örneğinde görüldüğü gibi, stil bileşenleri, CSS ve JS'yi aynı dosyada birleştirmenize olanak tanır. Böylece ayrı bir CSS dosyası oluşturmanız veya dosyadan dosyaya geçiş yapmanız gerekmez.

Bu, UI kitleri oluştururken büyük bir avantajdır çünkü bileşenlerin tüm işlevlerini tek bir dosyada saklarsınız.

Bunun dışında bileşenlerin içine CSS yazmak. Stillerle sahne ve durumları paylaşmayı kolaylaştırır.

Tip Kontrolüne izin verir

Tarz bileşenleriyle, stillerinizde kullanılan props ve değerleri kontrol edebilirsiniz. Örneğin, TypeScript kullanarak yukarıdaki düğme bileşenini yeniden yazabilirsiniz.

arayüzsahne{
 öncelik: boole
}
const Düğme = styled.button<sahne>`
dolgu malzemesi: 0.8rem 1.6rem;
 arka plan rengi: ${(sahne) => (props.birincil? "mor": "beyaz")};
 sınır: 1piksel katı #00000;
 renk: ${(sahne) => (props.birincil? "beyaz": "mor")};
`;

Bileşende TypeScript kullanma kod yazarken tür hatalarını kontrol etmek ve hata ayıklama süresini azaltmak anlamına gelir.

Kutunun Dışında Tema Oluşturmayı Destekler

Karanlık bir tema ekleme veya uygulamanız için başka bir tema zor ve zaman alıcı olabilir. Bununla birlikte, Styled bileşenleri süreci basitleştirir. Dışa aktararak uygulamanıza temalar ekleyebilirsiniz. sarma bileşeni.

const Düğme = tarz.ana`
 arka plan rengi: ${sahne => props.theme.light.background};
 renk: ${sahne => props.theme.light.fontColor};
`
<ThemeProvider teması={tema}>
<Buton>
 ışık düğmesi
</Button>
</ThemeProvider>

ThemeProvider bileşeni, temaları, sardığı tüm stillendirilmiş bileşenlere iletir. Bu bileşenler daha sonra tema değerlerini stillerinde kullanabilir. Bu örnekte, düğme, arka plan ve yazı tipi renkleri için tema değerlerini kullanır.

Tarz Bileşenleri Kullanmanın Eksileri

Styled-components kütüphanesini kullanmanın birçok faydası olmakla birlikte dezavantajları da vardır.

Çerçeveden Bağımsız Değildir

JS'de CSS yazmak, gelecekte ikisini ayırmanın zor olacağı anlamına gelir, bu da sürdürülebilirlik için korkunçtur. Örneğin, bir gün değiştirmeye karar verirseniz, JavaScript çerçevesi, kod tabanınızın çoğunu yeniden yazmanız gerekecek.

Bu zaman alıcı ve maliyetlidir. kullanma CSS modülleri veya duygu gibi çerçeveden bağımsız bir kitaplık geleceğe daha dayanıklıdır.

Okumak Zor Olabilir

Özellikle atomik tasarım sisteminin dışında, tarz ve React bileşenleri arasında ayrım yapmak zor olabilir. Bu örneği düşünün:

<Ana>
<Gezinti>
<Liste Öğesi>
<Bağlantı metni>Evcil Hayvan Sahiplenin</LinkText>
</ListItem>
<Liste Öğesi>
<Bağlantı metni>Bağış yapmak</LinkText>
</ListItem>
</Nav>
<başlık>kabul et, yapma'alışveriş yap!</Header>
<İkincilBtn btnText="Bağış yapmak" />
</Main>

Hangi bileşenin iş mantığı içerdiğini bilmenin tek yolu, donanım olup olmadığını kontrol etmektir. Ayrıca, bu örnekteki bileşen adları açıklayıcı olsa da, onları görselleştirmek yine de zordur.

Örneğin, Başlık bileşeni bir başlık olabilir, ancak stilleri kontrol etmediğiniz sürece bunun h1, h2 veya h3 olup olmadığını asla bilemezsiniz.

Bazı geliştiriciler, bu sorunu yalnızca stillendirilmiş bileşeni sarmalayıcı olarak kullanarak ve içindeki öğeler için anlamsal HTML etiketlerini kullanarak çözer.

Bu örnekte, başlık bileşeni bir h1 etiketi kullanabilir.

<h1>kabul et, yapma'alışveriş yap!</h1>

Bunu, daha sonra bir React bileşenine aktarabileceğiniz başka bir dosyada (örn. styled.js) stili oluşturulmuş bileşenleri tanımlayarak daha da ileri götürebilirsiniz.

içe aktarmak * olarak tarz itibaren './tarz'
// styled.components kullan
<tarz. Ana>
// kod
</styled.Main>

Bunu yapmak, hangi bileşenlerin stillendirildiğini ve hangilerinin React bileşenleri olduğunu net bir şekilde görmenizi sağlar.

Tarz Bileşenleri Çalışma Zamanında Derlenir

Tarzlanmış bileşenleri kullanan uygulamalar için, tarayıcı CSS'yi indirir ve sayfaya enjekte etmeden önce JavaScript kullanarak onu ayrıştırır. Bu, kullanıcının ilk yüklemede çok sayıda JavaScript indirmesi gerektiğinden performans sorunlarına neden olur.

Statik CSS çok daha hızlıdır. Tarayıcı, sayfaları biçimlendirmek için kullanmadan önce işlenmesi gerekmez. Ancak, stil bileşenleri kitaplığı her sürümde gelişiyor. Düşük performansı karşılayabiliyorsanız, devam edin ve kullanın.

Tarz Bileşenleri Ne Zaman Kullanılır?

Bazı geliştiriciler, JS dosyalarında CSS yazmaktan hoşlanırken, diğerleri ayrı CSS dosyalarına sahip olmayı tercih eder. CSS yazmayı nasıl seçeceğiniz nihayetinde projenin kendisine ve sizin veya ekibinizin neyi sevdiğine bağlı olmalıdır. Her şey tek bir dosyada bulunabildiğinden ve kolayca dışa aktarılıp yeniden kullanılabildiğinden, stilli bileşenler bir UI kitaplığı oluşturmak için iyi bir seçimdir.

Saf CSS yazmayı tercih ediyorsanız, CSS modüllerini kullanın. Ayrı CSS dosyalarınız olabilir ve bu, varsayılan olarak stilleri yerel olarak kapsar. Hangi seçimi yaparsanız yapın, sağlam CSS bilgisine sahip olmak çok önemlidir.