Tạo kiểu cho ứng dụng React bằng Stitches

Stitches là một thư viện CSS-in-JS hiện đại cung cấp một cách mạnh mẽ và linh hoạt để tạo kiểu cho các ứng dụng React của bạn. Nó cung cấp một cách tiếp cận độc đáo để tạo kiểu kết hợp các phần tốt nhất của CSS và JavaScript, cho phép bạn tạo kiểu động một cách dễ dàng.

Thiết lập các mũi khâu

Việc sử dụng thư viện Stitches để tạo kiểu cho ứng dụng React có thể so sánh với việc sử dụng thư viện styled-comments, vì cả hai đều là giải pháp CSS-in-JavaScript cho phép tạo kiểu thông qua mã JavaScript.

Để tạo kiểu cho ứng dụng React, trước tiên cần phải cài đặt và định cấu hình thư viện Stitches. Quá trình cài đặt có thể được thực hiện thông qua việc sử dụng thiết bị đầu cuối bằng cách chạy lệnh sau bằng npm:

 npm install @stitches/react

Ngoài ra, người ta có thể chọn cài đặt thư viện bằng Sợi bằng cách thực hiện lệnh sau:

 yarn add @stitches/react

Sau khi cài đặt thư viện “stitches”, người ta có thể bắt đầu tinh chỉnh tính thẩm mỹ của ứng dụng React của họ.

Tạo các thành phần theo kiểu

Để tạo ra các phần tử trang trí, Stitches cung cấp một phương pháp tạo kiểu được gọi là chức năng “tạo kiểu”. Cách tiếp cận sáng tạo này kết hợp việc áp dụng các nguyên tắc thiết kế trực quan và chức năng vốn có của các thành phần trong một khuôn khổ thống nhất.

Hàm được tạo kiểu chấp nhận hai tham số; tham số ban đầu là thành phần đánh dấu hoặc thành phần JSX và tham số tiếp theo là một đối tượng chứa các thông số kỹ thuật CSS cần thiết để hiển thị thành phần nói trên một cách hấp dẫn về mặt hình ảnh.

Chắc chắn, đây là một ví dụ về việc tạo một thành phần nút được tạo kiểu bằng cách sử dụng hàm styled trong TypeScript:

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

Mã được cung cấp tạo ra phần tử Button có màu nền u ám, tông văn bản tắt, các góc được bo tròn và khoảng trắng rộng rãi xung quanh nội dung của nó. Điều quan trọng cần lưu ý là khi chỉ định kiểu CSS bằng JavaScript, thông thường bạn nên sử dụng định dạng CamelCase thay vì ký hiệu kebab-case thông thường, vì điều này tuân thủ các quy ước phổ biến về tạo kiểu trong ngữ cảnh của ngôn ngữ.

Sau khi tạo thành phần nút tinh tế, người ta có thể đưa nó vào các thành phần React để tích hợp trong nhiều ứng dụng khác nhau.

Ví dụ:

 import React from "react";
import { Button } from "./Button";

function App() {
  return (
    <>
      <Button>Click Me</Button>
    </>
  );
}

export default App;

Ví dụ đã cho sử dụng thành phần Nút trong thành phần Ứng dụng. Nút sẽ tuân theo các kiểu được quy định bởi hàm styled, dẫn đến hình thức trực quan như sau:

Hàm tạo kiểu cho phép bao gồm các kiểu CSS lồng nhau thông qua cú pháp của nó, gần giống với ngôn ngữ mở rộng Sass/Scss. Tính năng này cho phép người dùng sắp xếp phong cách của họ tốt hơn đồng thời cải thiện khả năng đọc mã của họ.

Bằng cách sử dụng cách tiếp cận kiểu lồng nhau, hãy xem xét minh họa sau:

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

Mã đã cho sử dụng các biểu định kiểu xếp tầng (CSS) kèm theo và một lớp giả để chỉ định giao diện của phần tử Nút. Khi đặt con trỏ lên nút, bộ chọn có điều kiện &:hover sẽ sửa đổi màu nền cũng như màu văn bản của phần tử đã nói.

Tạo kiểu bằng hàm CSS

Thư viện Stitches cung cấp một phương pháp thay thế cho những người có thể cảm thấy khó chịu khi tạo các thành phần được tạo kiểu thông qua việc triển khai chức năng CSS. Hàm này có khả năng tạo ra các tên lớp hỗ trợ quá trình tạo kiểu bằng cách chấp nhận một đối tượng JavaScript chỉ chứa các thông số thuộc tính CSS làm đầu vào.

Có thể đạt được việc kết hợp kiểu CSS trong ứng dụng JavaScript này bằng cách sử dụng hàm css, cho phép triển khai các kiểu tùy chỉnh để nâng cao giao diện trực quan và trải nghiệm người dùng của các thành phần.

 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;

Lớp trình bày sử dụng một loạt các quy tắc và hướng dẫn về phong cách để trực quan hóa khả năng tương tác của các thành phần của ứng dụng. Các nguyên tắc này được gói gọn trong đối tượng buttonStyles, trong đó chúng xác định các khía cạnh khác nhau như màu sắc, kích thước, khoảng cách, căn chỉnh và các thuộc tính thiết kế khác góp phần tạo ra giao diện người dùng trực quan và hấp dẫn trực quan. Bằng cách sử dụng các tham số kiểu dáng này, hệ thống đảm bảo rằng mỗi thành phần tuân theo một ngôn ngữ hình ảnh thống nhất, nâng cao tính nhất quán tổng thể và khả năng sử dụng trên các thành phần và bối cảnh khác nhau.

Tạo kiểu toàn cầu

Bằng cách sử dụng thư viện Stitches, người ta có thể thiết lập các họa tiết thiết kế có thể áp dụng phổ biến trong toàn bộ ứng dụng dựa trên React của mình bằng cách sử dụng hàm GlobalCss. Chức năng này xây dựng và triển khai các yếu tố phong cách phổ biến mang lại chủ đề hình ảnh nhất quán trên tất cả các thành phần của ứng dụng.

Khi bạn đã thiết lập các nguyên tắc thiết kế chung của mình bằng cách sử dụng globalCSS, điều cần thiết là phải triển khai các nguyên tắc này trong toàn bộ ứng dụng của bạn bằng cách gọi hàm tương ứng trong thành phần ứng dụng mà bạn đã chọn. Điều này sẽ đảm bảo rằng tất cả các yếu tố tuân thủ ngôn ngữ hình ảnh gắn kết và trải nghiệm người dùng mà bạn đã tạo ra một cách cẩn thận.

Ví dụ:

 import React from "react";
import { globalCss } from "@stitches/react";

const globalStyles = globalCss({
  body: { backgroundColor: "#f2f2f2", color: "#333333" },
});

function App() {
  globalStyles();

  return <></>;
}

export default App;

Đoạn mã được cung cấp thể hiện ứng dụng của hàm globalCss, được sử dụng để xác định các thuộc tính kiểu dáng được liên kết với phần tử HTML body. Cụ thể, lệnh gọi hàm globalCss cụ thể này thiết lập màu xanh xám nhạt (#f2f2f2) làm màu nền và màu xám đậm hơn (#333333) làm màu văn bản cho phần tử nói trên.

Tạo kiểu động

Thư viện Stitches cung cấp một khả năng ấn tượng được gọi là tạo kiểu động, cho phép tạo kiểu phụ thuộc vào đạo cụ React bằng cách sử dụng phím biến thể. Khóa này đóng vai trò là thuộc tính cho cả CSS và các hàm được tạo kiểu, cho phép tạo ra nhiều biến thể của các thành phần.

Ví dụ:

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

Đoạn mã đã cho tạo ra phần tử Nút tùy chỉnh có màu sắc đặc biệt bắt nguồn từ thuộc tính màu được chỉ định. Sau khi tạo, thành phần Nút linh hoạt và nổi bật về mặt trực quan này đã sẵn sàng để tích hợp trong các ứng dụng khác nhau.

Ví dụ:

 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;

Khi hiển thị ứng dụng nói trên, nó sẽ mang lại giao diện người dùng có hai phần tử được mô tả trực quan giống như biểu diễn đồ họa kèm theo.

Tạo mã thông báo chủ đề

Thư viện Stitches cho phép các nhà phát triển thiết lập một bộ sưu tập các thành phần thiết kế được gọi là “mã thông báo thiết kế”, bao gồm nhiều thuộc tính hình ảnh khác nhau của giao diện người dùng của họ, bao gồm cách phối màu, kiểu chữ, khoảng cách ký tự và các thuộc tính đồ họa khác. Bằng cách triển khai các mã thông báo này, người ta có thể đảm bảo tính đồng nhất trong toàn bộ ứng dụng đồng thời tạo điều kiện thuận lợi cho việc điều chỉnh giao diện chung của nó một cách dễ dàng.

Để tạo các mã thông báo theo chủ đề này, hãy sử dụng chức năng createStitches có sẵn trong thư viện stitch. Hàm này cho phép tùy chỉnh hành vi của thư viện và phải được gọi trong tệp ./stitches.config.ts hoặc ./stitches.config.js .

Dưới đây là hình minh họa thể hiện quy trình tạo mã thông báo chủ đề, có thể được sử dụng trong nhiều ứng dụng khác nhau như xử lý ngôn ngữ tự nhiên và phân tích cảm xúc:

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

Sau khi xác định mã thông báo chủ đề của bạn, việc sử dụng chúng hiện có thể thực hiện được trong bối cảnh kiểu dáng thành phần của bạn.

 import { styled } from "../stitches.config.js";

export const Button = styled("button", {
  padding: "$1 $3",
  borderRadius: "12px",
  fontSize: "$1",
  border: "none",
  color: '$black',
  backgroundColor: '$gray',
});

Mã nói trên sử dụng mã thông báo màu $gray và $black để chi phối màu nền và màu nội dung văn bản của nút, cũng như sử dụng mã thông báo khoảng cách $1 và $3 để xác định phần đệm của nút, trong khi dựa vào biến kích thước phông chữ $1 để thiết lập kích thước phông chữ của nút.

Tạo kiểu hiệu quả với các mũi khâu

Stitches là một thư viện có khả năng cao, cung cấp giải pháp mạnh mẽ và có khả năng thích ứng để nâng cao giao diện trực quan cho các ứng dụng React của một người. Cung cấp các khả năng nâng cao như các thành phần được tạo kiểu, kiểu có thể điều chỉnh và CSS toàn cầu, nó tạo điều kiện thuận lợi cho việc tạo ra các yếu tố thiết kế phức tạp một cách dễ dàng. Bất kể bạn đang xây dựng một dự án React nhỏ hay mở rộng, Stitches đều thể hiện mình là một lựa chọn đáng gờm khi xem xét các sở thích về phong cách.

Một sự thay thế tuyệt vời cho thư viện Stitches là thư viện Emotion, đây là một giải pháp CSS-in-JS được sử dụng rộng rãi cho phép tạo kiểu bằng JavaScript. Tính đơn giản và linh hoạt của nó làm cho nó trở thành một lựa chọn hấp dẫn để tạo ra các yếu tố thiết kế ấn tượng trong các ứng dụng.