Home-theater-designers
Stitches ialah perpustakaan CSS-dalam-JS moden yang menyediakan cara yang berkuasa dan fleksibel untuk menggayakan aplikasi React anda. Ia menawarkan pendekatan unik untuk penggayaan yang menggabungkan bahagian terbaik CSS dan JavaScript, membolehkan anda mencipta gaya dinamik dengan mudah.
Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN
Sediakan Jahitan
Menggayakan aplikasi React anda menggunakan jahitan adalah serupa dengan menggunakan perpustakaan komponen gaya . Memandangkan jahitan dan komponen-gaya adalah kedua-dua perpustakaan CSS-dalam-JS yang membolehkan anda menulis gaya dalam JavaScript.
Sebelum menggayakan aplikasi React anda, anda mesti memasang dan menyediakan perpustakaan jahitan. Untuk memasang perpustakaan menggunakan npm, jalankan arahan berikut dalam terminal anda:
npm install @stitches/react
Sebagai alternatif, anda boleh memasang perpustakaan menggunakan benang dengan arahan ini:
yarn add @stitches/react
Setelah anda memasang perpustakaan jahitan, anda boleh mula menggayakan aplikasi React anda.
Mencipta Komponen Bergaya
Untuk mencipta komponen bergaya, perpustakaan jahitan menyediakan a digayakan fungsi. Fungsi gaya membolehkan anda mencipta komponen gaya yang menggabungkan gaya CSS dan logik komponen.
The digayakan fungsi mengambil dua hujah. Yang pertama ialah elemen HTML/JSX, dan yang kedua ialah objek yang mengandungi sifat CSS untuk menggayakannya.
Begini cara anda boleh mencipta komponen butang gaya menggunakan digayakan fungsi:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
});
Blok kod di atas mencipta a Butang komponen dengan warna latar belakang gelap, warna teks kelabu, jejari jidar dan beberapa pelapik. Ambil perhatian bahawa anda menulis sifat CSS dalam camelCase, bukan kebab-case. Ini kerana camelCase ialah cara yang lebih biasa untuk menulis sifat CSS dalam JavaScript.
Sebaik sahaja anda telah mencipta komponen butang gaya, anda boleh mengimportnya ke dalam komponen React anda dan menggunakannya.
Sebagai contoh:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
Contoh ini menggunakan Butang komponen dalam sebuah Aplikasi komponen. Butang akan menggunakan gaya yang anda berikan kepada digayakan fungsi, menjadikannya kelihatan seperti ini:
The digayakan fungsi juga membolehkan anda menyusun gaya CSS, dengan sintaks yang serupa dengan bahasa sambungan SASS/SCSS . Ini memudahkan anda mengatur gaya anda dan menjadikan kod anda lebih mudah dibaca.
Berikut ialah contoh menggunakan teknik gaya bersarang:
aplikasi penghantaran apa yang paling banyak dibayar
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
Kod ini menggunakan gaya CSS bersarang dan kelas pseudo untuk menyasarkan Butang komponen. Apabila anda menuding pada butang, pemilih bersarang &:legar menukar latar belakang butang dan warna teks.
Menggayakan Dengan Fungsi CSS
Jika anda tidak selesa membuat komponen gaya, jahitan perpustakaan menawarkan css fungsi, yang boleh menjana nama kelas untuk menggayakan komponen anda. The css fungsi mengambil objek JavaScript dengan sifat CSS sebagai satu-satunya hujahnya.
Begini cara anda boleh menggayakan 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",
},
});
function App() {
return (
<>
<button className={buttonStyle()}>Click Me</button>
</>
);
}
export default App;
The css fungsi mencipta gaya CSS untuk butang yang kemudiannya diberikan oleh kod ini kepada butangGaya pembolehubah. The butangGaya fungsi menjana nama kelas untuk gaya yang ditentukan, yang kemudiannya dihantar ke Nama kelas prop daripada butang komponen.
Mencipta Gaya Global
Menggunakan jahitan perpustakaan, anda juga boleh menentukan gaya global untuk aplikasi anda menggunakan globalCss fungsi. Fungsi globalCss mencipta dan menggunakan gaya global pada aplikasi React anda.
Selepas menentukan gaya global anda menggunakan globalCSS , panggil fungsi dalam anda aplikasi komponen untuk menggunakan gaya pada aplikasi anda.
Sebagai contoh:
import React from "react";
import { globalCss } from "@stitches/react";
const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
function App() {
globalStyles();
return <></>;
}
export default App;
Contoh ini mentakrifkan gaya untuk badan elemen menggunakan globalCss fungsi. Panggilan menetapkan warna latar belakang kepada #f2f2f2 dan warna teks kepada #333333 .
Mencipta Gaya Dinamik
Salah satu ciri yang lebih berkuasa daripada jahitan perpustakaan ialah keupayaannya untuk mencipta gaya dinamik. Anda boleh mencipta gaya yang bergantung pada props bertindak balas dengan varian kunci. The varian kunci adalah harta kedua-dua css dan digayakan fungsi. Anda boleh membuat seberapa banyak varian komponen anda yang anda mahu.
Sebagai contoh:
import { styled } from "@stitches/react";
export const 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",
},
},
},
},
});
Kod ini mencipta a Butang komponen dengan a warna pelbagai. The warna varian membolehkan anda menukar warna butang berdasarkan a warna prop. Sebaik sahaja anda telah mencipta Butang komponen, anda boleh menggunakannya dalam aplikasi anda.
Sebagai contoh:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button color="gray">Click Me</Button>
<Button color="black">Click Me</Button>
</>
);
}
export default App;
Sebaik sahaja anda membuat aplikasi ini, dua butang akan dipaparkan pada antara muka anda. Butang akan kelihatan seperti imej di bawah.
Mencipta Token Tema
The jahitan perpustakaan membolehkan anda membuat satu set token reka bentuk yang mentakrifkan aspek visual UI anda, seperti warna, tipografi, jarak dan banyak lagi. Token ini membantu mengekalkan konsistensi dan menjadikan pengemaskinian gaya keseluruhan aplikasi anda kelihatan mudah.
Untuk mencipta token tema ini, gunakan createStitches fungsi. The createStitches fungsi daripada perpustakaan jahitan membolehkan anda mengkonfigurasi perpustakaan. Pastikan untuk menggunakan createStitches fungsi dalam a jahitan.config.ts fail atau a stitches.config.js fail.
Berikut ialah contoh cara membuat token tema:
import { createStitches } from "@stitches/react";
export const { styled, css } = createStitches({
theme: {
colors: {
gray: "#e2e2e2",
black: "#333333",
},
space: {
1: "5px",
2: "10px",
3: "15px",
},
fontSizes: {
1: "12px",
2: "13px",
3: "15px",
},
},
});
Memandangkan anda telah menentukan token tema anda, anda boleh menggunakannya dalam gaya komponen anda.
import { styled } from "../stitches.config.js";
export const Button = styled("button", {
padding: " ",
borderRadius: "12px",
fontSize: "",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
Blok kod di atas menggunakan token warna $kelabu dan $hitam untuk latar belakang dan warna teks butang. Ia juga menggunakan token ruang dan untuk menetapkan pelapik butang dan pembolehubah saiz fon untuk menetapkan saiz fon butang.
Penggayaan Cekap Dengan Jahitan
Pustaka jahitan menyediakan cara yang berkuasa dan fleksibel untuk menggayakan aplikasi React anda. Dengan ciri seperti komponen gaya, gaya dinamik dan globalCSS, anda boleh membuat reka bentuk yang kompleks dengan mudah. Sama ada anda sedang membina aplikasi React yang kecil atau besar, jahitan boleh menjadi pilihan terbaik untuk penggayaan.
Alternatif yang bagus untuk perpustakaan jahitan ialah perpustakaan emosi. Emosi ialah perpustakaan CSS-dalam-JS yang popular yang membolehkan anda menulis gaya dalam JavaScript. Ia mudah digunakan dan menawarkan banyak ciri untuk mencipta gaya yang hebat untuk aplikasi anda.