จัดแต่งทรงผมแอปพลิเคชัน React ด้วย Stitches

Stitches เป็นไลบรารี CSS-in-JS สมัยใหม่ที่ให้วิธีที่มีประสิทธิภาพและยืดหยุ่นในการจัดรูปแบบแอปพลิเคชัน React ของคุณ มันมีแนวทางที่เป็นเอกลักษณ์ในการออกแบบที่รวมส่วนที่ดีที่สุดของ CSS และ JavaScript เข้าด้วยกัน ทำให้คุณสามารถสร้างสไตล์ไดนามิกได้อย่างง่ายดาย

การตั้งค่าการเย็บแผล

การใช้ไลบรารี Stitches เพื่อจัดสไตล์แอปพลิเคชัน React นั้นเทียบได้กับการใช้ไลบรารีส่วนประกอบที่มีสไตล์ เนื่องจากทั้งสองเป็นโซลูชัน CSS ใน JavaScript ที่เปิดใช้งานการสร้างสไตล์ผ่านโค้ด JavaScript

เพื่อจัดสไตล์แอปพลิเคชัน React จำเป็นต้องติดตั้งและกำหนดค่าไลบรารี Stitches ก่อน กระบวนการติดตั้งสามารถดำเนินการผ่านการใช้เทอร์มินัลโดยการรันคำสั่งต่อไปนี้โดยใช้ npm:

 npm install @stitches/react

หรืออาจเลือกที่จะติดตั้งไลบรารี่โดยใช้ Yarn โดยดำเนินการคำสั่งต่อไปนี้:

 yarn add @stitches/react

เมื่อติดตั้งไลบรารี “stitches” เราอาจเริ่มต้นด้วยการปรับแต่งความสวยงามของแอปพลิเคชัน React

การสร้างส่วนประกอบที่มีสไตล์

เพื่อสร้างองค์ประกอบที่ประดับประดา Stitches เสนอวิธีการจัดสไตล์ที่เรียกว่าฟังก์ชัน"สไตล์"แนวทางที่เป็นนวัตกรรมนี้หลอมรวมการประยุกต์ใช้หลักการออกแบบภาพและฟังก์ชันการทำงานโดยธรรมชาติของส่วนประกอบต่างๆ ภายในกรอบงานที่เป็นหนึ่งเดียว

ฟังก์ชัน styled ยอมรับพารามิเตอร์สองตัว พารามิเตอร์เริ่มต้นเป็นมาร์กอัปหรือส่วนประกอบ JSX และพารามิเตอร์ต่อมาเป็นออบเจ็กต์ที่มีข้อกำหนด CSS ที่จำเป็นสำหรับการแสดงผลส่วนประกอบดังกล่าวด้วยรูปลักษณ์ที่น่าดึงดูด

แน่นอนว่า นี่คือตัวอย่างของการสร้างส่วนประกอบปุ่มสไตล์โดยใช้ฟังก์ชัน styled ใน 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",
});

โค้ดที่ให้มาจะสร้างองค์ประกอบ ปุ่ม พร้อมด้วยสีพื้นหลังที่ดูหม่นหมอง เสียงข้อความที่ถูกปิดเสียง มุมโค้งมน และพื้นที่สีขาวที่เพียงพอรอบๆ เนื้อหา สิ่งสำคัญที่ควรทราบคือเมื่อระบุสไตล์ CSS โดยใช้ JavaScript เป็นเรื่องปกติที่จะใช้การจัดรูปแบบ CamelCase แทนที่จะใช้สัญลักษณ์ kebab-case ที่ใช้โดยทั่วไป เนื่องจากสิ่งนี้เป็นไปตามแบบแผนทั่วไปสำหรับการจัดสไตล์ในบริบทของภาษา

เมื่อสร้างองค์ประกอบปุ่มที่ได้รับการปรับปรุงแล้ว เราอาจนำองค์ประกอบดังกล่าวไปใช้กับส่วนประกอบ React เพื่อบูรณาการภายในแอปพลิเคชันต่างๆ

ตัวอย่างเช่น:

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

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

export default App;

ตัวอย่างที่ให้มาใช้ส่วนประกอบ Button ภายในส่วนประกอบ App ปุ่มจะเป็นไปตามสไตล์ที่กำหนดโดยฟังก์ชัน styled ส่งผลให้มีลักษณะเป็นภาพดังนี้:

ฟังก์ชั่นที่มีสไตล์ช่วยให้สามารถรวมสไตล์ CSS ที่ซ้อนกันผ่านไวยากรณ์ของมัน ซึ่งคล้ายกับภาษาส่วนขยาย Sass/Scss อย่างใกล้ชิด คุณลักษณะนี้ช่วยให้ผู้ใช้สามารถจัดเรียงสไตล์ของตนได้ดีขึ้นในขณะที่ปรับปรุงให้อ่านโค้ดได้ง่ายขึ้น

การใช้แนวทางสไตล์แบบซ้อน ให้พิจารณาภาพประกอบต่อไปนี้:

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

รหัสที่กำหนดใช้สไตล์ชีตแบบเรียงซ้อน (CSS) และคลาสหลอกเพื่อระบุลักษณะที่ปรากฏขององค์ประกอบปุ่ม เมื่อวางเคอร์เซอร์ไว้เหนือปุ่ม ตัวเลือกแบบมีเงื่อนไข &:hover จะปรับเปลี่ยนสีพื้นหลังและสีข้อความขององค์ประกอบดังกล่าว

จัดแต่งทรงผมด้วยฟังก์ชัน CSS

ไลบรารี Stitches มอบวิธีการทางเลือกสำหรับผู้ที่อาจรู้สึกไม่สบายเมื่อสร้างส่วนประกอบที่มีสไตล์ผ่านการใช้งานฟังก์ชัน CSS ฟังก์ชันนี้สามารถสร้างชื่อคลาสที่อำนวยความสะดวกในกระบวนการจัดสไตล์โดยการยอมรับอ็อบเจ็กต์ JavaScript ที่มีข้อกำหนดคุณสมบัติ CSS เพียงอย่างเดียวเป็นอินพุต

การรวมสไตล์ CSS ในแอปพลิเคชัน JavaScript นี้สามารถทำได้โดยใช้ฟังก์ชัน 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",
  },
});

function App() {
  return (
    <>
      <button className={buttonStyle()}>Click Me</button>
    </>
  );
}

export default App;

เลเยอร์การนำเสนอใช้กฎและแนวทางโวหารชุดหนึ่งเพื่อให้เห็นภาพการโต้ตอบขององค์ประกอบของแอปพลิเคชัน แนวทางเหล่านี้ถูกห่อหุ้มไว้ภายในออบเจ็กต์ buttonStyles ซึ่งหลักเกณฑ์เหล่านี้จะกำหนดแง่มุมต่างๆ เช่น สี ขนาด ระยะห่าง การจัดตำแหน่ง และคุณสมบัติการออกแบบอื่นๆ ที่มีส่วนช่วยสร้างอินเทอร์เฟซผู้ใช้ที่ใช้งานง่ายและดึงดูดสายตา ด้วยการใช้พารามิเตอร์การจัดรูปแบบเหล่านี้ ระบบจะรับประกันว่าแต่ละองค์ประกอบสอดคล้องกับภาษาภาพที่เหมือนกัน เพิ่มความสอดคล้องโดยรวมและความสามารถในการใช้งานในส่วนประกอบและบริบทที่แตกต่างกัน

การสร้างสไตล์สากล

ด้วยการใช้ไลบรารี Stitches เราสามารถสร้างลวดลายการออกแบบที่ใช้ได้ในระดับสากลตลอดแอปพลิเคชันที่ใช้ React โดยใช้ฟังก์ชัน globalCss ฟังก์ชันนี้สร้างและใช้องค์ประกอบโวหารที่แพร่หลายซึ่งประดับธีมภาพที่สอดคล้องกันในทุกองค์ประกอบของแอปพลิเคชัน

เมื่อคุณสร้างหลักการออกแบบที่เป็นสากลโดยใช้ globalCSS แล้ว จำเป็นอย่างยิ่งที่จะต้องนำหลักเกณฑ์เหล่านี้ไปปฏิบัติทั่วทั้งแอปพลิเคชันของคุณ โดยการเรียกใช้ฟังก์ชันที่เกี่ยวข้องภายในส่วนประกอบ แอป ที่คุณเลือก เพื่อให้แน่ใจว่าองค์ประกอบทั้งหมดเป็นไปตามภาษาภาพและประสบการณ์ผู้ใช้ที่คุณสร้างขึ้นมาอย่างพิถีพิถัน

ตัวอย่างเช่น:

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

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

function App() {
  globalStyles();

  return <></>;
}

export default App;

ข้อมูลโค้ดที่ให้มาสาธิตการใช้งานฟังก์ชัน globalCss ซึ่งใช้ในการกำหนดคุณสมบัติโวหารที่เกี่ยวข้องกับองค์ประกอบ HTML body โดยเฉพาะอย่างยิ่ง การเรียกใช้ฟังก์ชัน globalCss นี้จะสร้างสีน้ำเงินอมเทาอ่อน (#f2f2f2) เป็นสีพื้นหลัง และสีเทาเข้ม (#333333) เป็นสีข้อความสำหรับองค์ประกอบดังกล่าว

การสร้างสไตล์แบบไดนามิก

ไลบรารี Stitches นำเสนอความสามารถที่น่าประทับใจที่เรียกว่าการสร้างสไตล์ไดนามิก ซึ่งช่วยให้สามารถสร้างสไตล์ที่ขึ้นอยู่กับอุปกรณ์ประกอบฉาก React โดยใช้คีย์ ตัวแปร คีย์นี้ทำหน้าที่เป็นคุณสมบัติสำหรับทั้ง CSS และฟังก์ชันที่มีสไตล์ ช่วยให้สามารถสร้างส่วนประกอบต่างๆ ได้หลากหลาย

ตัวอย่างเช่น:

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

โค้ดที่กำหนดจะสร้างองค์ประกอบ ปุ่ม ที่กำหนดเองซึ่งมีเฉดสีที่โดดเด่นซึ่งได้มาจากคุณสมบัติสีที่ระบุ เมื่อสร้างเสร็จแล้ว ส่วนประกอบ ปุ่ม ที่สะดุดตาและใช้งานได้หลากหลายนี้พร้อมสำหรับการบูรณาการภายในแอปพลิเคชันต่างๆ

ตัวอย่างเช่น:

 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;

เมื่อแสดงผลแอปพลิเคชันดังกล่าว จะต้องให้ส่วนต่อประสานกับผู้ใช้ที่มีองค์ประกอบที่มองเห็นได้สององค์ประกอบซึ่งคล้ายกับการแสดงกราฟิกที่ล้อมรอบ

การสร้างโทเค็นธีม

ไลบรารี Stitches ช่วยให้นักพัฒนาสามารถสร้างคอลเลกชันขององค์ประกอบการออกแบบที่เรียกว่า “โทเค็นการออกแบบ” ซึ่งรวมถึงคุณสมบัติการมองเห็นต่างๆ ของอินเทอร์เฟซผู้ใช้ รวมถึงโทนสี แบบอักษร การเว้นวรรคอักขระ และคุณลักษณะกราฟิกอื่นๆ ด้วยการใช้โทเค็นเหล่านี้ เราจึงสามารถรับประกันความสม่ำเสมอตลอดทั้งการใช้งาน ในขณะเดียวกันก็อำนวยความสะดวกในการปรับเปลี่ยนรูปลักษณ์ทั่วไปได้อย่างง่ายดาย

หากต้องการสร้างโทเค็นเฉพาะเรื่องเหล่านี้ ให้ใช้ฟังก์ชัน createStitches ที่มีอยู่ในไลบรารี stitches ฟังก์ชันนี้ช่วยให้ปรับแต่งพฤติกรรมของไลบรารีได้ และควรเรียกใช้ภายในไฟล์ ./stitches.config.ts หรือ ./stitches.config.js

ต่อไปนี้เป็นภาพประกอบที่สาธิตกระบวนการสร้างโทเค็นธีม ซึ่งสามารถนำไปใช้ในการใช้งานต่างๆ เช่น การประมวลผลภาษาธรรมชาติและการวิเคราะห์ความรู้สึก:

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

หลังจากกำหนดคำจำกัดความของโทเค็นธีมของคุณแล้ว การใช้ประโยชน์โทเค็นดังกล่าวก็สามารถทำได้ภายในบริบทของการจัดสไตล์ส่วนประกอบของคุณ

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

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

โค้ดข้างต้นใช้โทเค็นสี $gray และ $black เพื่อควบคุมสีพื้นหลังและข้อความของปุ่ม นอกเหนือจากการใช้โทเค็นการเว้นวรรค $1 และ $3 เพื่อกำหนดช่องว่างภายในของปุ่ม ในขณะที่อาศัยตัวแปรขนาดตัวอักษร $1 เพื่อสร้างขนาดตัวอักษรของปุ่ม

จัดแต่งทรงผมอย่างมีประสิทธิภาพด้วยการเย็บร้อย

Stitches เป็นไลบรารีที่มีความสามารถสูงที่นำเสนอโซลูชันที่แข็งแกร่งและปรับเปลี่ยนได้เพื่อเพิ่มรูปลักษณ์ของแอปพลิเคชัน React นำเสนอความสามารถขั้นสูง เช่น ส่วนประกอบที่มีสไตล์ สไตล์ที่ปรับได้ และ CSS ทั่วโลก ช่วยให้การสร้างองค์ประกอบการออกแบบที่ซับซ้อนทำได้อย่างง่ายดาย ไม่ว่าคุณจะสร้างโปรเจ็กต์ React ขนาดเล็กหรือกว้างขวาง Stitches ก็นำเสนอตัวเองว่าเป็นตัวเลือกที่น่าเกรงขามเมื่อพิจารณาถึงความชอบด้านสไตล์

สิ่งทดแทนที่ดีเยี่ยมสำหรับไลบรารี Stitches คือไลบรารี Emotion ซึ่งเป็นโซลูชัน CSS-in-JS ที่ใช้กันอย่างแพร่หลาย ทำให้สามารถสร้างสไตล์โดยใช้ JavaScript ได้ ความเรียบง่ายและความสามารถรอบด้านทำให้เป็นตัวเลือกที่น่าสนใจสำหรับการสร้างองค์ประกอบการออกแบบที่น่าประทับใจภายในแอปพลิเคชัน