Menata Aplikasi React Dengan Jahitan

Stitches adalah pustaka CSS-in-JS modern yang menyediakan cara yang kuat dan fleksibel untuk menata gaya aplikasi React Anda. Ini menawarkan pendekatan gaya unik yang menggabungkan bagian terbaik dari CSS dan JavaScript, memungkinkan Anda membuat gaya dinamis dengan mudah.

Menyiapkan Jahitan

Menata aplikasi React Anda menggunakan jahitan mirip dengan menggunakan perpustakaan komponen bergaya. Mengingat jahitan itu dan komponen bergaya keduanya merupakan pustaka CSS-in-JS yang memungkinkan Anda menulis gaya dalam JavaScript.

Sebelum menata aplikasi React Anda, Anda harus menginstal dan mengatur pustaka jahitan. Untuk menginstal perpustakaan menggunakan npm, jalankan perintah berikut di terminal Anda:

npm install @stitches/react

Alternatifnya, Anda dapat menginstal perpustakaan menggunakan benang dengan perintah ini:

yarn add @stitches/react

Setelah Anda menginstal pustaka stitches, Anda dapat mulai menata gaya aplikasi React Anda.

Membuat Komponen Bergaya

Untuk membuat komponen yang ditata, perpustakaan jahitan menyediakan a bergaya fungsi. Fungsi styled memungkinkan Anda membuat komponen bergaya yang menggabungkan gaya CSS dan logika komponen.

Itu bergaya fungsi membutuhkan dua argumen. Yang pertama adalah elemen HTML/JSX, dan yang kedua adalah objek yang berisi properti CSS untuk menatanya.

Inilah cara Anda membuat komponen tombol bergaya menggunakan bergaya fungsi:

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

Blok kode di atas membuat a Tombol komponen dengan warna latar belakang gelap, warna teks abu-abu, radius batas, dan beberapa bantalan. Perhatikan bahwa Anda menulis properti CSS di camelCase, bukan kebab-case. Ini karena camelCase adalah cara yang lebih umum untuk menulis properti CSS di JavaScript.

Setelah Anda membuat komponen tombol yang diberi gaya, Anda dapat mengimpornya ke komponen React Anda dan menggunakannya.

Misalnya:

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

Contoh ini menggunakan Tombol komponen dalam sebuah Aplikasi komponen. Tombol ini akan mengadopsi gaya yang Anda teruskan ke bergaya fungsinya, sehingga terlihat seperti ini:

Itu bergaya function juga memungkinkan Anda menyusun gaya CSS, dengan sintaksis yang mirip bahasa ekstensi SASS/SCSS. Ini memudahkan Anda mengatur gaya dan membuat kode Anda lebih mudah dibaca.

Berikut ini contoh penggunaan teknik gaya bersarang:

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",
 },
});

Kode ini menggunakan gaya CSS bersarang dan kelas semu untuk menargetkan Tombol komponen. Saat Anda mengarahkan kursor ke tombol, pemilih bertumpuk &: arahkan kursor mengubah latar belakang tombol dan warna teks.

Styling Dengan Fungsi CSS

Jika Anda merasa tidak nyaman membuat komponen bergaya, jahitan perpustakaan menawarkan css fungsi, yang dapat menghasilkan nama kelas untuk menata gaya komponen Anda. Itu css fungsi mengambil objek JavaScript dengan properti CSS sebagai satu-satunya argumennya.

Inilah cara Anda menata komponen Anda menggunakan css fungsi:

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;

Itu css fungsi membuat gaya CSS untuk tombol yang kemudian ditetapkan oleh kode ini gaya tombol variabel. Itu gaya tombol fungsi menghasilkan nama kelas untuk gaya yang ditentukan, yang kemudian diteruskan ke nama kelas penyangga dari tombol komponen.

Menciptakan Gaya Global

Menggunakan jahitan perpustakaan, Anda juga dapat menentukan gaya global untuk aplikasi Anda menggunakan globalCss fungsi. Fungsi globalCss membuat dan menerapkan gaya global ke aplikasi React Anda.

Setelah menentukan gaya global Anda menggunakan globalCSS, panggil fungsi di file Anda aplikasi komponen untuk menerapkan gaya ke aplikasi Anda.

Misalnya:

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

Contoh ini mendefinisikan gaya untuk tubuh elemen menggunakan globalCss fungsi. Panggilan tersebut mengatur warna latar belakang #f2f2f2 dan warna teksnya #333333.

Membuat Gaya Dinamis

Salah satu fitur yang lebih canggih dari jahitan perpustakaan adalah kemampuannya untuk menciptakan gaya dinamis. Anda dapat membuat gaya yang bergantung pada Alat peraga reaksi dengan varian kunci. Itu varian key adalah properti dari keduanya css Dan bergaya fungsi. Anda dapat membuat varian komponen sebanyak yang Anda inginkan.

Misalnya:

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",
 },
 },
 },
 },
});

Kode ini menciptakan a Tombol komponen dengan a warna varian. Itu warna varian memungkinkan Anda mengubah warna tombol berdasarkan a warna menopang. Setelah Anda membuat Tombol komponen, Anda dapat menggunakannya di aplikasi Anda.

Misalnya:

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

Setelah Anda merender aplikasi ini, dua tombol akan ditampilkan di antarmuka Anda. Tombolnya akan terlihat seperti gambar di bawah ini.

Membuat Token Tema

Itu jahitan perpustakaan memungkinkan Anda membuat sekumpulan token desain yang menentukan aspek visual UI Anda, seperti warna, tipografi, spasi, dan banyak lagi. Token ini membantu menjaga konsistensi dan membuat pembaruan gaya keseluruhan aplikasi Anda terlihat mudah.

Untuk membuat token tema ini, gunakan membuat Jahitan fungsi. Itu membuat Jahitan fungsi dari perpustakaan jahitan memungkinkan Anda untuk mengkonfigurasi perpustakaan. Pastikan untuk menggunakan membuat Jahitan berfungsi dalam a jahitan.config.ts berkas atau a jahitan.config.js mengajukan.

Berikut ini contoh cara membuat token tema:

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",
 },
 },
});

Sekarang setelah Anda menentukan token tema, Anda dapat menggunakannya dalam gaya komponen Anda.

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

Blok kode di atas menggunakan token warna $abu-abu Dan $hitam untuk latar belakang dan warna teks tombol. Itu juga menggunakan token luar angkasa $1 Dan $3 untuk mengatur padding tombol dan variabel ukuran font $1 untuk mengatur ukuran font tombol.

Penataan Gaya Efisien Dengan Jahitan

Pustaka stitches menyediakan cara yang ampuh dan fleksibel untuk menata gaya aplikasi React Anda. Dengan fitur seperti komponen gaya, gaya dinamis, dan globalCSS, Anda dapat dengan mudah membuat desain yang kompleks. Baik Anda sedang membangun aplikasi React kecil atau besar, jahitan bisa menjadi pilihan yang tepat untuk penataan gaya.

Alternatif yang bagus untuk perpustakaan jahitan adalah perpustakaan emosi. Emotion adalah pustaka CSS-in-JS populer yang memungkinkan Anda menulis gaya dalam JavaScript. Mudah digunakan dan menawarkan banyak fitur untuk menciptakan gaya hebat untuk aplikasi Anda.