Bir React Uygulamasını Dikişlerle Şekillendirme

Stitches, React uygulamalarınızı şekillendirmenin güçlü ve esnek bir yolunu sağlayan, JS'de modern bir CSS kitaplığıdır. Kolayca dinamik stiller oluşturmanıza olanak tanıyan, CSS ve JavaScript'in en iyi kısımlarını birleştiren benzersiz bir stil oluşturma yaklaşımı sunar.

Dikişlerin Ayarlanması

React uygulamanızı kullanarak şekillendirme dikişler benzer styled-components kütüphanesini kullanma. Dikişler göz önüne alındığında ve stilize bileşenler her ikisi de JavaScript'te stiller yazmanıza olanak tanıyan JS'de CSS kitaplıklarıdır.

React uygulamanızı şekillendirmeden önce dikiş kitaplığını kurmanız ve ayarlamanız gerekir. Kütüphaneyi npm kullanarak kurmak için terminalinizde aşağıdaki komutu çalıştırın:

npm install @stitches/react

Alternatif olarak, şu komutla iplik kullanarak kütüphaneyi kurabilirsiniz:

yarn add @stitches/react

Stitches kütüphanesini yükledikten sonra React uygulamanızı şekillendirmeye başlayabilirsiniz.

Stillendirilmiş Bileşenler Oluşturma

Stillendirilmiş bileşenler oluşturmak için dikiş kütüphanesi bir tarz işlev. Stil işlevi, CSS stillerini ve bileşenlerin mantığını birleştiren stilize bileşenler oluşturmanıza olanak tanır.

tarz fonksiyon iki argüman alır. Birincisi bir HTML/JSX öğesi, ikincisi ise ona stil vermek için CSS özelliklerini içeren bir nesnedir.

Stil sahibi bir düğme bileşenini aşağıdaki şekilde oluşturabilirsiniz: tarz işlev:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
});

Yukarıdaki kod bloğu bir oluşturur Düğme koyu arka plan rengine, gri metin rengine, kenarlık yarıçapına ve bir miktar dolguya sahip bileşen. CSS özelliklerini kebab-case'e değil, camelCase'e yazdığınızı unutmayın. Bunun nedeni, camelCase'in JavaScript'te CSS özelliklerini yazmanın daha yaygın bir yolu olmasıdır.

Stillendirilmiş düğme bileşenini oluşturduktan sonra onu React bileşenlerinize aktarabilir ve kullanabilirsiniz.

Örneğin:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
Click Me</Button>
 </>
 );
}
exportdefault App;

Bu örnek şunları kullanır: Düğme bir bileşen Uygulama bileşen. Düğme, aktardığınız stilleri benimseyecektir. tarz işlevi şu şekilde görünmesini sağlar:

tarz işlevi aynı zamanda CSS stillerini benzer bir söz dizimi ile iç içe yerleştirmenize olanak tanır. SASS/SCSS uzantı dili. Bu, stillerinizi düzenlemenizi ve kodunuzu daha okunaklı hale getirmenizi kolaylaştırır.

Yuvalanmış stiller tekniğini kullanan bir örnek:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});

Bu kod, hedeflemek için iç içe geçmiş CSS stillerini ve sözde sınıfı kullanır. Düğme bileşen. Düğmenin üzerine geldiğinizde iç içe geçmiş seçici &: üzerine gelin düğmenin arka planını ve metin renklerini değiştirir.

CSS İşleviyle Şekillendirme

Stil sahibi bileşenler oluşturmaktan rahatsızlık duyuyorsanız dikişler kütüphane şunları sunar: css Bileşenlerinize stil vermek için sınıf adları oluşturabilen işlev. css işlevi, tek argümanı olarak CSS özelliklerine sahip bir JavaScript nesnesini alır.

Kullanarak bileşenlerinize nasıl stil uygulayabileceğiniz aşağıda açıklanmıştır: css işlev:

import React from"react";
import { css } from"@stitches/react";
const buttonStyle = css({
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});
functionApp() {
return (
 <>
Click Me</button>
 </>
 );
}
exportdefault App;

css işlev, bu kodun daha sonra atadığı düğme için CSS stillerini oluşturur. düğme stili değişken. düğme stili işlev, tanımlanan stiller için bir sınıf adı üretir ve bu daha sonra sınıfa iletilir. sınıf adı pervanesi düğme bileşen.

Küresel Stiller Yaratmak

Kullanmak dikişler kitaplığı kullanarak uygulamanız için genel stiller de tanımlayabilirsiniz. küreselCss işlev. globalCss işlevi, global stiller oluşturur ve React uygulamanıza uygular.

Kullanarak global stillerinizi tanımladıktan sonra küresel CSS, telefonunuzdaki işlevi çağırın uygulama Stilleri uygulamanıza uygulamak için bileşen.

Örneğin:

import React from"react";
import { globalCss } from"@stitches/react";
const globalStyles = globalCss({
 body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
functionApp() {
 globalStyles();
return<>;
}
exportdefault App;

Bu örnek, aşağıdakilerin stillerini tanımlar: vücut öğesini kullanarak küreselCss işlev. Çağrı arka plan rengini şu şekilde ayarlar: #f2f2f2 ve metin rengi #333333.

Dinamik Stiller Oluşturma

En güçlü özelliklerinden biri dikişler kütüphane, dinamik stiller yaratma yeteneğidir. Aşağıdakilere bağlı stiller oluşturabilirsiniz: Tepki sahne malzemeleri ile varyantlar anahtar. varyantlar anahtar her ikisinin de bir özelliğidir css Ve tarz işlevler. Bileşeninizin istediğiniz sayıda varyantını oluşturabilirsiniz.

Örneğin:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 fontFamily: "cursive",
 border: "none",
 variants: {
 color: {
 black: {
 backgroundColor: "#333333",
 color: "#e2e2e2",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
 },
 gray: {
 backgroundColor: "#e2e2e2",
 color: "#333333",
"&:hover": {
 backgroundColor: "#333333",
 color: "#e2e2e2",
 },
 },
 },
 },
});

Bu kod bir oluşturur Düğme olan bileşen renk varyant. renk değişken, düğmenin rengini bir temele göre değiştirmenize olanak tanır renk destek. Bir kez oluşturduktan sonra Düğme bileşenini uygulamanızda kullanabilirsiniz.

Örneğin:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
"gray">Click Me</Button>
"black">Click Me</Button>
 </>
 );
}
exportdefault App;

Bu uygulamayı oluşturduğunuzda arayüzünüzde iki düğme görüntülenecektir. Butonlar aşağıdaki resimdeki gibi görünecektir.

Tema Belirteçleri Oluşturma

dikişler kitaplık, kullanıcı arayüzünüzün renkler, tipografi, boşluklar ve daha fazlası gibi görsel yönlerini tanımlayan bir dizi tasarım belirteci oluşturmanıza olanak tanır. Bu belirteçler tutarlılığın korunmasına yardımcı olur ve uygulamanızın genel stillerinin güncellenmesinin kolay görünmesini sağlar.

Bu tema belirteçlerini oluşturmak için Dikişler oluştur işlev. Dikişler oluştur Dikiş kütüphanesindeki fonksiyon, kütüphaneyi yapılandırmanıza olanak tanır. Kullandığınızdan emin olun Dikişler oluştur bir işlevde dikişler.config.ts dosya veya bir Stitches.config.js dosya.

Aşağıda bir tema belirtecinin nasıl oluşturulacağına ilişkin bir örnek verilmiştir:

import { createStitches } from"@stitches/react";
exportconst { styled, css } = createStitches({
 theme: {
 colors: {
 gray: "#e2e2e2",
 black: "#333333",
 },
 space: {
1: "5px",
2: "10px",
3: "15px",
 },
 fontSizes: {
1: "12px",
2: "13px",
3: "15px",
 },
 },
});

Artık tema belirteçlerinizi tanımladığınıza göre bunları bileşen stillerinizde kullanabilirsiniz.

import { styled } from"../stitches.config.js";
exportconst Button = styled("button", {
 padding: "$1 $3",
 borderRadius: "12px",
 fontSize: "$1",
 border: "none",
 color: '$black',
 backgroundColor: '$gray',
});

Yukarıdaki kod bloğu renk belirteçlerini kullanır $gri Ve $siyah düğmenin arka planı ve metin rengi için. Ayrıca boşluk belirteçlerini de kullanır $1 Ve $3 düğmenin dolgusunu ve yazı tipi boyutu değişkenini ayarlamak için $1 Düğmenin yazı tipi boyutunu ayarlamak için.

Dikişlerle Verimli Şekillendirme

Dikiş kitaplığı, React uygulamalarınıza stil vermenin güçlü ve esnek bir yolunu sunar. Stillendirilmiş bileşenler, dinamik stiller ve globalCSS gibi özelliklerle kolayca karmaşık tasarımlar oluşturabilirsiniz. İster küçük ister büyük bir React uygulaması oluşturuyor olun, dikişler stillendirme için mükemmel bir seçim olabilir.

Dikiş kütüphanesine harika bir alternatif duygu kütüphanesidir. Emotion, JavaScript'te stiller yazmanıza olanak tanıyan popüler bir JS'de CSS kitaplığıdır. Kullanımı kolaydır ve uygulamanız için harika stiller oluşturmanızı sağlayacak birçok özellik sunar.