React'i kullanarak, stillerinizi genel bir CSS dosyasına kaydetmeniz normaldir. Bu, özellikle büyük bir proje üzerinde çalışırken, belirli bileşenlerin stilini bulmayı zorlaştırabilir. Stil verilmiş bileşenlerle, belirli bir bileşenin stilini bulmak kolaydır çünkü bunlar bileşenle aynı dosyadadır.
React uygulamanızda stilize edilmiş bileşenleri nasıl kuracağınızı ve entegre edeceğinizi görelim.
Styled-Components Kitaplığını Kurma
Bu komutu terminalinizde çalıştırarak stilize edilmiş bileşenleri kurabilirsiniz:
npm i tarz bileşenleri
Tarz bileşenlerini yarn kullanarak kurmak için şunu çalıştırın:
yarn stil bileşenleri ekleyin
Stil Oluşturulmuş Bileşen Oluşturma
Tarzlı bir bileşen, stilleri olan standart bir React bileşeni gibidir. Çeşitli var stil bileşenlerinin artıları ve eksileri, doğru kullanım için dikkate alınması önemlidir.
Genel sözdizimi şöyle görünür:
içe aktarmak tarz itibaren"stil bileşenleri";
sabit BileşenAdı = tarz. DOMElementTag`
cssProperty: cssValue
`
İşte ithalat tarz dan tarz bileşen kütüphane. bu tarz işlevi, JavaScript kodunu gerçek CSS'ye dönüştüren dahili bir yöntemdir. bu Bileşen Adı stilli bileşenin adıdır. bu DOMElementTag div, span, button vb. gibi biçimlendirmek istediğiniz HTML/JSX öğesidir.
Tarzlandırılmış bir bileşen kullanarak stillendirilmiş bir düğme oluşturmak için önce bir düğme öğesi içeren bir React bileşeni oluşturmanız gerekir.
Şöyle:
içe aktarmak Tepki itibaren"tepki";
işlevDüğme() {
geri dönmek (
Artık, stilli bileşenleri kullanarak düğme için bir stil oluşturabilirsiniz:
içe aktarmak tarz itibaren"stil bileşenleri";
sabit Tarz Düğmesi = tarz düğmesi`
dolgu malzemesi: 1rem 0.8rem;
sınır yarıçapı: 15piksel;
arka plan rengi: gri;
renk: #FFFFFF;
yazı Boyutu: 15piksel;
`
Her şeyi bir araya getirerek, değiştirmeniz gerekecek düğme ile etiketle Stil Düğmesi bileşen:
içe aktarmak tarz itibaren"stil bileşenleri";
içe aktarmak Tepki itibaren"tepki";sabit Tarz Düğmesi = tarz düğmesi`
dolgu malzemesi: 1rem 0.8rem;
sınır yarıçapı: 15piksel;
arka plan rengi: gri;
renk: #FFFFFF;
yazı Boyutu: 15piksel;
`
işlevDüğme() {
geri dönmek (hoşgeldiniz!!!</StyledButton>
)
}
Yuvalama Stilleri
Stil verilmiş bileşenlerle çalışırken de stilleri iç içe yerleştirebilirsiniz. Biçemli bileşenleri iç içe yerleştirmek biraz şuna benzer: SASS/SCSS Uzantı Dilini kullanarak. Bir bileşen birden çok öğe etiketi içeriyorsa ve her etiketi ayrı ayrı stillendirmek istiyorsa stilleri iç içe yerleştirebilirsiniz.
Örneğin:
içe aktarmak Tepki itibaren'tepki';
işlevUygulama() {
geri dönmek (Stil Bileşenleri</h1>
styled-components'a hoş geldiniz</p>
</div>
)
}
Bu kod, içeren bir bileşen oluşturur. h1 eleman ve bir P eleman.
Stil verilmiş bileşenlerin iç içe stil özelliğini kullanarak bu öğelere stil uygulayabilirsiniz:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak tarz itibaren'stil bileşenleri';sabit StyledApp = styled.div`
renk: #333333;
metin hizalama: merkez;h1 {
yazı Boyutu: 32piksel;
yazı tipi stili: italik;
yazı tipi ağırlığı: kalın;
harf boşluğu: 1.2rem;
metin dönüşümü: büyük harf;
}P {
marj-blok-başlangıç: 1rem;
yazı Boyutu: 18piksel;
}
`
işlevUygulama() {
geri dönmek (Stil Bileşenleri</h1>
styled-components'a hoş geldiniz</p>
</StyledApp>
)
}
Bu kod, stil verilmiş bir bileşen kullanır ve h1 Ve P etiketler.
Değişken Oluşturma ve Kullanma
Değişkenler oluşturma yeteneği, stilli bileşenler kitaplığının dikkate değer bir özelliğidir. Bu yetenek, stilleri belirlemek için JavaScript değişkenlerini kullanabileceğiniz dinamik stil sağlar.
Değişkenleri stilli bileşenlerde kullanmak için bir değişken oluşturun ve ona bir CSS özellik değeri atayın. Daha sonra bu değişkeni doğrudan CSS'nizde kullanabilirsiniz, örneğin:
içe aktarmak tarz itibaren"stil bileşenleri";sabit AnaRenk = "kırmızı";
sabit Başlık = styled.h1`
renk: ${MainColor};
`;
işlevUygulama() {
geri dönmek (
<>Merhaba Dünya!/Heading>
</>
);
}
Yukarıdaki kod bloğunda “Selam Dünya!” kırmızı renkte görüntülenecektir.
Bu örneğin, stilli bileşenle bağlantılı olarak bir şablon hazır bilgisinde standart bir JavaScript değişkeni kullandığını unutmayın. dan farklı bir yaklaşımdır. CSS değişkenlerini kullanma.
Stilleri Genişletme
Stil verilmiş bir bileşen oluşturduktan sonra, bileşeni kullanacaksınız. Bazı durumlarda ince farklar yaratmak veya daha fazla stil eklemek isteyebilirsiniz. Bu gibi durumlarda stilleri genişletebilirsiniz.
Stilleri genişletmek için, stil verilen bileşeni tarz() yapıcı ve ardından ek stilleri dahil edin.
Bu örnekte, BirincilDüğme bileşeni, Button bileşeninin stilini devralır ve farklı bir mavi arka plan rengi ekler.
içe aktarmak tarz itibaren"stil bileşenleri";
içe aktarmak Tepki itibaren"tepki";sabit Düğme = stil düğmesi`
dolgu malzemesi: 1rem 0.8rem;
sınır yarıçapı: 15piksel;
arka plan rengi: gri;
renk: #FFFFFF;
yazı Boyutu: 15piksel;
`sabit BirincilDüğme = tarz (Düğme)`
arka plan rengi: mavi;
`
işlevUygulama() {
geri dönmek (
Ayrıca, stil uygulanmış bir bileşenin oluşturduğu etiketi de değiştirebilirsiniz. gibi bir pervane
bu gibi prop, stilli bileşenin oluşturacağı temel HTML/JSX öğesini belirtmenize olanak tanır.
Örneğin:
içe aktarmak tarz itibaren"stil bileşenleri";
içe aktarmak Tepki itibaren"tepki";sabit Düğme = stil düğmesi`
dolgu malzemesi: 1rem 0.8rem;
sınır yarıçapı: 15piksel;
arka plan rengi: gri;
renk: #FFFFFF;
yazı Boyutu: 15piksel;
`
işlevUygulama() {
geri dönmek (
Bu kod, Düğme bileşen olarak A öğesi, ayarlayarak href '#' özelliği.
Genel Stiller Oluşturma
Stil verilmiş bileşenler genellikle bir bileşenin kapsamına alınır, bu nedenle uygulamanın bir bütün olarak nasıl stillendirileceğini merak ediyor olabilirsiniz. Uygulamayı global stil kullanarak stillendirebilirsiniz.
Styled-Components şunları sunar: GlobalStyle oluştur stilleri genel olarak bildirmenizi sağlayan işlev. bu GlobalStyle oluştur bileşen kapsamlı stil sınırlamasını kaldırır ve her bileşen için geçerli olan stilleri bildirmenize olanak tanır.
Global stiller oluşturmak için, GlobalStyle oluştur işlev ve ihtiyacınız olan stilleri beyan edin.
Örneğin:
içe aktarmak {createGlobalStyle} itibaren'stil bileşenleri';sabit GlobalStyles = createGlobalStyle`
@içe aktarmak url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
marj: 0;
dolgu malzemesi: 0;
kutu boyutlandırma: kenarlık kutusu;
}vücut {
arka plan rengi: #343434;
yazı Boyutu: 15piksel;
renk: #FFFFFF;
font ailesi: "Montserrat", sans Serif;
}
`
ihracatvarsayılan Küresel Stiller;
Sonra içe aktarırsınız Küresel Stiller bileşenini uygulama bileşeninize ekleyin ve oluşturun. Rendering Küresel Stiller uygulama bileşeninizdeki bileşen, stilleri uygulamanıza uygulayacaktır.
Şöyle:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak Küresel Stiller itibaren'./Küresel';
işlevUygulama() {
geri dönmek (
</div>
)
}
Stil Bileşenlerine Daha Fazlası
React uygulamanızda styled bileşenlerini nasıl kuracağınızı, kuracağınızı ve kullanacağınızı öğrendiniz. Stil verilmiş bileşenler kitaplığı, React uygulamanızı tasarlamanın etkili bir yoludur. Stil ve dinamik stilde esneklik sağlayan birçok kullanışlı özellik sağlar.
Animasyonlar gibi stillendirilecek daha pek çok bileşen var ve React, bunun yanında öğrenilecek çok şeyi olan büyük bir çerçeve.
