Emotion kitaplığı, React'te CSS kullanımınızı basitleştirir ve bazı kullanışlı söz dizimi özellikleri de ekler.
Bir React uygulaması tasarlamak, özellikle stillerinizi düzenli ve sürdürülebilir tutmak istiyorsanız zorlayıcı olabilir. Bu işlemi basitleştirmeye yardımcı olmak için Emotion kitaplığı, CSS'nin üzerinde daha yüksek düzeyli bir soyutlama sağlar.
Duygu Nedir?
Emotion, stillerinizi yönetmek için basit ve verimli bir yol sağlayan, React uygulamalarını tasarlamak için bir kitaplıktır. JavaScript'te CSS yazmanıza izin verir ve bileşenlerinizi şekillendirmek için esnek bir API sağlar.
React uygulamanıza stil vermek için Emotion kullanmanın ana faydalarından biri, stillerinizi yönetmek için daha verimli bir yol sunmasıdır. Örneğin, birden çok bileşende aynı sınıf adlarını, ortaya çıkan adlandırma çakışmaları riski olmadan kullanabilirsiniz. CSS/SASS ile çalışırken.
Duygu kitaplığı, stillerinizi sayfanın tamamı yerine yalnızca onları kullanan bileşenlere uygular. Bu, sayfadaki diğer stillerle çakışmaları önlemenize ve kodunuzu daha modüler ve yeniden kullanılabilir hale getirmenize yardımcı olabilir.
Duygu Nasıl Kurulur
Emotion kitaplığını React uygulamanıza eklemek için aşağıdaki terminal komutunu çalıştırın:
npm install --save @emotion/react
Emotion kitaplığı artık projenize kurulmalı ve React uygulamanıza stil vermek için kullanıma hazır olmalıdır.
Emotion'ın css Prop'ını Kullanarak Şekillendirme
Emotion kitaplığını yükledikten sonra, css React uygulamanıza stil vermek için pervane. bu css prop, style prop'a benzer, çünkü stilleri ona dizeler veya normal JavaScript nesneleri biçiminde iletebilirsiniz.
kullanarak uygulamanıza stil vermek için css prop'tan içe aktarmanız gerekir. @ duygu/tepki kütüphane, ardından stillerinizi tanımlayın:
/** @jsxImportSource @duygu/tepki */
içe aktarmak Tepki itibaren'tepki';
içe aktarmak {css} itibaren"@ duygu/tepki";işlevUygulama() {
geri dönmek (
dolgu malzemesi: 0.5rem 1rem;
kenarlık: yok;
yazı tipi ailesi: el yazısı;
sınır yarıçapı: 12piksel;
renk: #333333;
arka plan rengi: devral;
marj-blok-başlangıç: 2rem;
kenar boşluğu bloğu sonu: 2rem;
`}>
Beni tıkla
</button>
)
}
ihracatvarsayılan Uygulama;
İlk kod satırı, /** @jsxImportSource @emotion/react */, Emotion kitaplığının o dosya için JSX pragması olarak kullanılması gerektiğini belirtmek için JSX dosyasına eklemeniz gereken özel bir yorumdur.
JSX'te bir pragma, JSX sözdizimini normal JavaScript'e dönüştüren bir işlevdir. React varsayılan olarak React.createElement JSX pragma olarak işlev görür. Ancak, ile @jsxImportSource yorum, farklı bir pragma belirtebilirsiniz.
bu durumda, @ duygu/tepki pragma, JSX'e şunu kullanmasını söyler: jsx JSX kodunu dönüştürmek için Emotion kitaplığından işlev. Pragma yorumunu bir JSX dosyasına ekleyerek bileşenlerinizde Emotion kitaplığının CSS-in-JS özelliklerini kullanabilirsiniz.
button bileşeni, bazı özel stiller içeren bir düğme oluşturur. Burada, css prop, özel stili düğme öğesine ekler.
bu css prop ayrıca iç içe stil vermeyi de destekler. İç içe stil, birbirinin içine yuvalanmış stiller yazmanıza olanak tanır.
Örneğin:
/** @jsxImportSource @duygu/tepki */
içe aktarmak Tepki itibaren'tepki';
içe aktarmak {css} itibaren"@ duygu/tepki";işlevUygulama() {
geri dönmek (
dolgu malzemesi: 0.5rem 1rem;
kenarlık: yok;
yazı tipi ailesi: el yazısı;
sınır yarıçapı: 12piksel;
renk: #333333;
arka plan rengi: devral;
marj-blok-başlangıç: 2rem;
kenar boşluğu bloğu sonu: 2rem;&: üzerine gelin{
renk: #e2e2e2;
arka plan rengi: #333333;
}
`}>
Beni tıkla
</button>
)
}
ihracatvarsayılan Uygulama;
Bu örnekte, fareyle üzerine gelme stilinin bildirimi, öğenin iç içe stil özelliğini kullanır. css pervane Yukarıdaki kod bloğundaki arka plan ve yazı tipi rengi, düğmenin üzerine geldiğinizde değişecektir.
Nesne Stillerini css Prop'a Aktarma
bu css prop ayrıca normal JavaScript nesne stillerini de kabul eder. Birkaç bileşeni şekillendirirken, nesne stillerini kullanmak, bileşenlerinizdeki stilleri yeniden kullanmanıza olanak tanır.
nesne stillerini aktarmak için css prop, stilleri bir JavaScript nesnesi olarak tanımlayın ve prop'a iletin:
sabit stil = {
dolgu malzemesi: '0.5rem 1rem',
sınır: 'hiçbiri',
font ailesi: 'el yazısı',
kenarlık Yarıçapı: "12 piksel",
renk: '#333333',
arka plan rengi: "miras",
kenar boşluğuBlockStart: "2rem",
marjBlockEnd: "2rem","&: üzerine gelin": {
renk: "#e2e2e2",
arka plan rengi: '#333333',
}
}
geri dönmek ("uygulama">
CSS özellik adlarının tireli yerine camelCased olduğuna dikkat edin. Bunun nedeni, stillerin camelCase adlandırma kurallarını kullanan JavaScript nesneleri olarak tanımlanmasıdır.
Stil Oluşturulmuş Bileşenleri Kullanarak Şekillendirme
Emotion kitaplığı, React uygulamalarını şekillendirirken stillendirilmiş bileşenleri de kullanır. Tarz bileşenleri kullanma kullanıma hazır stiller içermeleri dışında React bileşenlerine benzer. Stil verilmiş bileşenler oluşturmak için, tarz işlev.
bu tarz işlevi, yeniden kullanılabilir stilli bileşenler oluşturmanıza olanak tanır. kullanmak için tarz işlevinden içe aktarın duygu/tarz kütüphane.
Almak için @emotion/tarz kitaplığı uygulamanızda, onu projenize kuracaksınız. Bunu, projenizin terminalinde aşağıdaki komutu çalıştırarak yapabilirsiniz:
npm yüklemek @emotion/styled
kurduktan sonra @emotion/tarz kitaplığı içe aktarın tarz işlev ve stillerinizi tanımlayın:
içe aktarmak tarz itibaren"@emotion/tarz";sabit Düğme = stilli.düğme({
dolgu malzemesi: '0.5rem 1rem',
sınır: 'hiçbiri',
font ailesi: 'el yazısı',
kenarlık Yarıçapı: "12 piksel",
renk: '#333333',
arka plan rengi: "miras",
kenar boşluğuBlockStart: "2rem",
marjBlockEnd: "2rem","&: üzerine gelin": {
renk: "#e2e2e2",
arka plan rengi: '#333333',
}
})
ihracatvarsayılan Düğme;
Yukarıdaki kod bloğunda, stili belirlenmiş bir bileşen Düğme yaratıldı. Bu Düğmeyi, React uygulamanızda diğer herhangi bir React bileşeni gibi kullanabilirsiniz.
Şöyle:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak Düğme itibaren'./Düğme';işlevUygulama() {
geri dönmek (
ihracatvarsayılan Uygulama;
Rendering Uygulama bileşeni, içinde tanımlanan stillere sahip bir düğme görüntüler. Düğme Ekranınızdaki bileşen.
bu tarz işlev ayrıca dize stillerini de kabul eder. Nesne stilleri yaklaşımından farklı görünüyor ama benzer şekilde çalışıyor.
içe aktarmak tarz itibaren"@emotion/tarz";sabit Düğme = stil düğmesi`
dolgu malzemesi: 0.5rem 1rem;
kenarlık: yok;
yazı tipi ailesi: el yazısı;
sınır yarıçapı: 12piksel;
renk: #333333;
arka plan rengi: devral;
marj-blok-başlangıç: 2rem;
kenar boşluğu bloğu sonu: 2rem;&: üzerine gelin {
renk: #e2e2e2;
arka plan rengi: #333333;
}
`
ihracatvarsayılan Düğme;
Duygu İçeren Verimli Şekillendirme
Emotion, stillerinizi yönetmek için basit ve verimli bir yol sağlayan, React bileşenlerine stil vermek için güçlü bir kitaplıktır. İster yeni başlayan ister deneyimli bir geliştirici olun, Emotion, React uygulamanızı şekillendirme sürecini basitleştirmeye ve kodunuzu korumayı ve ölçeklendirmeyi kolaylaştırmaya yardımcı olabilir.
Bu nedenle, React bileşenlerinizi şekillendirmenin daha verimli ve esnek bir yolunu arıyorsanız, Emotion'u düşünün.
