Δημιουργία στυλ μιας εφαρμογής React με βελονιές

Το Stitches είναι μια σύγχρονη βιβλιοθήκη CSS-in-JS που παρέχει έναν ισχυρό και ευέλικτο τρόπο για το στυλ των εφαρμογών React σας. Προσφέρει μια μοναδική προσέγγιση στο στυλ που συνδυάζει τα καλύτερα μέρη CSS και JavaScript, επιτρέποντάς σας να δημιουργείτε εύκολα δυναμικά στυλ.

Ρύθμιση βελονιών

Δημιουργία στυλ εφαρμογής React χρησιμοποιώντας ράμματα είναι παρόμοια με χρησιμοποιώντας τη βιβλιοθήκη styled-components. Λαμβάνοντας υπόψη ότι τα ράμματα και στιλ-εξαρτήματα είναι και οι δύο βιβλιοθήκες CSS-in-JS που σας επιτρέπουν να γράφετε στυλ σε JavaScript.

Προτού διαμορφώσετε το στυλ της εφαρμογής React, πρέπει να εγκαταστήσετε και να ρυθμίσετε τη βιβλιοθήκη βελονιών. Για να εγκαταστήσετε τη βιβλιοθήκη χρησιμοποιώντας npm, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm install @stitches/react

Εναλλακτικά, μπορείτε να εγκαταστήσετε τη βιβλιοθήκη χρησιμοποιώντας νήμα με αυτήν την εντολή:

yarn add @stitches/react

Αφού εγκαταστήσετε τη βιβλιοθήκη βελονιών, μπορείτε να ξεκινήσετε το στυλ της εφαρμογής React.

Δημιουργία εξαρτημάτων με στυλ

Για τη δημιουργία στοιχείων με στυλ, η βιβλιοθήκη βελονιών παρέχει ένα στιλ λειτουργία. Η συνάρτηση στυλ σάς επιτρέπει να δημιουργείτε στοιχεία με στυλ που συνδυάζουν στυλ CSS και τη λογική των στοιχείων.

ο στιλ η συνάρτηση παίρνει δύο ορίσματα. Το πρώτο είναι ένα στοιχείο HTML/JSX και το δεύτερο είναι ένα αντικείμενο που περιέχει τις ιδιότητες CSS για το στυλ του.

Δείτε πώς μπορείτε να δημιουργήσετε ένα στοιχείο κουμπιού με στυλ χρησιμοποιώντας το στιλ λειτουργία:

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

Το μπλοκ κώδικα παραπάνω δημιουργεί ένα Κουμπί στοιχείο με σκούρο χρώμα φόντου, γκρι χρώμα κειμένου, ακτίνα περιγράμματος και λίγη επένδυση. Σημειώστε ότι γράφετε τις ιδιότητες CSS στο camelCase, όχι στο kebab-case. Αυτό συμβαίνει επειδή το camelCase είναι ένας πιο συνηθισμένος τρόπος εγγραφής ιδιοτήτων CSS σε JavaScript.

Αφού δημιουργήσετε το στοιχείο κουμπιού στυλ, μπορείτε να το εισαγάγετε στα στοιχεία του React και να το χρησιμοποιήσετε.

Για παράδειγμα:

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

Αυτό το παράδειγμα χρησιμοποιεί το Κουμπί συστατικό σε ένα App συστατικό. Το κουμπί θα υιοθετήσει τα στυλ που περάσατε στο στιλ λειτουργία, κάνοντάς το να μοιάζει με αυτό:

ο στιλ Η λειτουργία σάς επιτρέπει επίσης να τοποθετείτε στυλ CSS, με παρόμοια σύνταξη με τη γλώσσα επέκτασης SASS/SCSS. Αυτό σας διευκολύνει να οργανώσετε τα στυλ σας και να κάνετε τον κώδικά σας πιο ευανάγνωστο.

Ακολουθεί ένα παράδειγμα που χρησιμοποιεί την τεχνική ένθετων στυλ:

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

Αυτός ο κώδικας χρησιμοποιεί ένθετα στυλ CSS και μια ψευδο-κλάση για τη στόχευση Κουμπί συστατικό. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κουμπί, τον ένθετο επιλογέα &:φτερουγίζω αλλάζει το φόντο του κουμπιού και τα χρώματα κειμένου.

Styling με τη συνάρτηση CSS

Εάν αισθάνεστε άβολα να δημιουργήσετε εξαρτήματα με στυλ, το ράμματα βιβλιοθήκη προσφέρει το css λειτουργία, η οποία μπορεί να δημιουργήσει ονόματα κλάσεων για το στυλ των στοιχείων σας. ο css Η συνάρτηση παίρνει ένα αντικείμενο JavaScript με τις ιδιότητες CSS ως μοναδικό όρισμα.

Δείτε πώς μπορείτε να διαμορφώσετε τα στοιχεία σας χρησιμοποιώντας το css λειτουργία:

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 Η συνάρτηση δημιουργεί τα στυλ CSS για το κουμπί που στη συνέχεια εκχωρεί αυτός ο κώδικας στο στυλ κουμπιού μεταβλητός. ο στυλ κουμπιού Η συνάρτηση δημιουργεί ένα όνομα κλάσης για τα καθορισμένα στυλ, το οποίο στη συνέχεια μεταβιβάζεται στο όνομα τάξης στήριγμα του κουμπί συστατικό.

Δημιουργία παγκόσμιων στυλ

Χρησιμοποιώντας την ράμματα βιβλιοθήκη, μπορείτε επίσης να ορίσετε καθολικά στυλ για την εφαρμογή σας χρησιμοποιώντας το globalCss λειτουργία. Η συνάρτηση globalCss δημιουργεί και εφαρμόζει καθολικά στυλ στην εφαρμογή React σας.

Αφού καθορίσετε τα καθολικά στυλ σας χρησιμοποιώντας globalCSS, καλέστε τη συνάρτηση στο δικό σας εφαρμογή στοιχείο για να εφαρμόσετε τα στυλ στην εφαρμογή σας.

Για παράδειγμα:

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

Αυτό το παράδειγμα ορίζει τα στυλ για το σώμα στοιχείο χρησιμοποιώντας το globalCss λειτουργία. Η κλήση ορίζει το χρώμα φόντου σε #f2f2f2 και το χρώμα του κειμένου σε #333333.

Δημιουργία δυναμικών στυλ

Ένα από τα πιο ισχυρά χαρακτηριστικά του ράμματα βιβλιοθήκη είναι η ικανότητά της να δημιουργεί δυναμικά στυλ. Μπορείτε να δημιουργήσετε στυλ που εξαρτώνται από Αντιδράστε στηρίγματα με την παραλλαγές κλειδί. ο παραλλαγές το κλειδί είναι ιδιότητα και των δύο css και στιλ λειτουργίες. Μπορείτε να δημιουργήσετε όσες παραλλαγές του στοιχείου σας θέλετε.

Για παράδειγμα:

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

Αυτός ο κώδικας δημιουργεί ένα Κουμπί συστατικό με α χρώμα παραλαγή. ο χρώμα Η παραλλαγή σάς επιτρέπει να αλλάξετε το χρώμα του κουμπιού με βάση το α χρώμα στήριγμα. Μόλις δημιουργήσετε το Κουμπί στοιχείο, μπορείτε να το χρησιμοποιήσετε στην εφαρμογή σας.

Για παράδειγμα:

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

Μόλις αποδώσετε αυτήν την εφαρμογή, θα εμφανιστούν δύο κουμπιά στη διεπαφή σας. Τα κουμπιά θα μοιάζουν με την παρακάτω εικόνα.

Δημιουργία διακριτικών θεμάτων

ο ράμματα Η βιβλιοθήκη σάς επιτρέπει να δημιουργήσετε ένα σύνολο διακριτικών σχεδίασης που καθορίζουν τις οπτικές πτυχές της διεπαφής χρήστη σας, όπως χρώματα, τυπογραφία, απόσταση και άλλα. Αυτά τα διακριτικά συμβάλλουν στη διατήρηση της συνέπειας και κάνουν την ενημέρωση των συνολικών στυλ της εφαρμογής σας να φαίνεται εύκολη.

Για να δημιουργήσετε αυτά τα διακριτικά θεμάτων, χρησιμοποιήστε το δημιουργία βελονιών λειτουργία. ο δημιουργία βελονιών λειτουργία από τη βιβλιοθήκη βελονιών σας επιτρέπει να διαμορφώσετε τη βιβλιοθήκη. Βεβαιωθείτε ότι χρησιμοποιείτε το δημιουργία βελονιών λειτουργία σε α stitches.config.ts αρχείο ή α stitches.config.js αρχείο.

Ακολουθεί ένα παράδειγμα για το πώς να δημιουργήσετε ένα διακριτικό θέματος:

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

Τώρα που έχετε ορίσει τα διακριτικά θεμάτων σας, μπορείτε να τα χρησιμοποιήσετε στα στυλ των στοιχείων σας.

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

Το μπλοκ κώδικα παραπάνω χρησιμοποιεί τα διακριτικά χρώματος $γκρι και $μαύρο για το φόντο και το χρώμα κειμένου του κουμπιού. Χρησιμοποιεί επίσης τα διακριτικά διαστήματος $1 και $3 για να ορίσετε το padding του κουμπιού και τη μεταβλητή μεγέθους γραμματοσειράς $1 για να ορίσετε το μέγεθος της γραμματοσειράς του κουμπιού.

Αποτελεσματικό στυλ με βελονιές

Η βιβλιοθήκη βελονιών παρέχει έναν ισχυρό και ευέλικτο τρόπο για το στυλ των εφαρμογών React σας. Με χαρακτηριστικά όπως στοιχεία με στυλ, δυναμικά στυλ και globalCSS, μπορείτε εύκολα να δημιουργήσετε πολύπλοκα σχέδια. Είτε φτιάχνετε μια μικρή είτε μεγάλη εφαρμογή React, οι βελονιές μπορούν να είναι μια εξαιρετική επιλογή για στυλ.

Μια εξαιρετική εναλλακτική στη βιβλιοθήκη βελονιών είναι η βιβλιοθήκη συναισθημάτων. Το Emotion είναι μια δημοφιλής βιβλιοθήκη CSS-in-JS που σας επιτρέπει να γράφετε στυλ σε JavaScript. Είναι εύκολο στη χρήση και προσφέρει πολλές δυνατότητες για τη δημιουργία εξαιρετικών στυλ για την εφαρμογή σας.