使用 Stitches 設計 React 應用程序的樣式
Stitches 是一個現代 CSS-in-JS 庫，它提供了一種強大而靈活的方式來設計 React 應用程序的樣式。它提供了一種獨特的樣式設置方法，結合了 CSS 和 JavaScript 的最佳部分，使您可以輕鬆創建動態樣式。
設置縫合
使用 Stitches 庫來設計 React 應用程序與使用 styled-components 庫相當，因為它們都是 CSS-in-JavaScript 解決方案，可以通過 JavaScript 代碼創建樣式。
為了設計 React 應用程序的樣式，需要首先安裝和配置 Stitches 庫。可以通過終端使用 npm 運行以下命令來執行安裝過程:
npm install @stitches/react
或者，可以選擇通過執行以下命令來使用 Yarn 安裝該庫:
yarn add @stitches/react
安裝“stitches”庫後，人們可以開始改進 React 應用程序的美觀性。
創建樣式組件
為了生成裝飾元素，Stitches 提供了一種稱為“styled”功能的樣式方法。這種創新方法融合了視覺設計原理的應用和統一框架內組件的固有功能。
樣式函數接受兩個參數；初始參數是標記或 JSX 組件，後續參數是包含渲染具有視覺吸引力的所述組件所需的 CSS 規範的對象。
當然，這裡是一個利用 TypeScript 中的 styled 函數創建樣式化按鈕組件的示例:
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",
});
提供的代碼生成一個“ Button ”元素，該元素具有陰暗的背景色調、柔和的文本色調、圓角以及內容周圍充足的空白。需要注意的是，當使用 JavaScript 指定 CSS 樣式時，通常使用駝峰命名法格式，而不是傳統上使用的短橫線命名法，因為這遵循語言上下文中流行的樣式約定。
在製作出一個精緻的按鈕元素後，人們可以將其引入到他們的 React 組件中，以便集成到各種應用程序中。
例如:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
給定的示例在“App”組件中使用“Button”組件。該按鈕將符合styled函數規定的樣式，從而產生如下視覺外觀:
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) 和偽類來指定 Button 元素的外觀。將光標放在按鈕上後，條件選擇器 &:hover 會修改該元素的背景顏色以及文本顏色。
使用 CSS 函數設置樣式
Stitches 庫為那些在通過 CSS 函數的實現來製作樣式組件時可能會感到不適的人提供了一種替代方法。該函數能夠生成類名，通過接受僅包含 CSS 屬性規範的 JavaScript 對像作為輸入來促進樣式處理。
可以通過利用“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 庫，人們可以通過使用 globalCss 函數在基於 React 的應用程序中建立普遍適用的設計主題。該函數構建並實現了普遍的風格元素，這些元素在應用程序的所有組件中註入了一致的視覺主題。
一旦您利用“globalCSS”建立了通用設計原則，就必須通過在您選擇的“app”組件中調用相應的函數來在整個應用程序中實施這些準則。這將確保所有元素都遵循您精心設計的有凝聚力的視覺語言和用戶體驗。
例如:
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”函數的應用，該函數用於定義與“body”HTML 元素關聯的樣式屬性。具體來說，對 globalCss 函數的這種特殊調用建立了淺灰藍色 (#f2f2f2) 作為背景色調，並建立了較深的灰色陰影 (#333333) 作為所述元素的文本顏色。
創建動態樣式
Stitches 庫提供了一項令人印象深刻的功能，即創建動態樣式，它允許使用“variants”鍵生成依賴於 React props 的樣式。該鍵充當 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",
},
},
},
},
});
給定的代碼片段生成一個自定義的“ Button ”元素，該元素具有源自指定顏色屬性的獨特色調。創建後，這個視覺上引人注目且多功能的“按鈕”組件就可以集成到各種應用程序中。
例如:
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 庫使開發人員能夠建立稱為“設計令牌”的設計元素集合，其中包含用戶界面的各種視覺屬性，包括配色方案、字體、字符間距和其他圖形屬性。通過實施這些令牌，可以確保整個應用程序的一致性，同時便於輕鬆調整其總體外觀。
要生成這些主題標記，請利用“stitches”庫中提供的“createStitches”函數。此函數允許自定義庫的行為，並且應該在./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 都是一個強大的選擇。
Emotion 庫是 Stitches 庫的絕佳替代品，它是一種廣泛使用的 CSS-in-JS 解決方案，支持使用 JavaScript 創作樣式。它的簡單性和多功能性使其成為在應用程序中製作令人印象深刻的設計元素的有吸引力的選擇。