Стилизация приложения React с помощью стежков

Stitches — это современная библиотека CSS-in-JS, которая предоставляет мощный и гибкий способ стилизации ваших приложений React. Он предлагает уникальный подход к стилизации, сочетающий в себе лучшие части CSS и JavaScript, что позволяет легко создавать динамические стили.

Настройка стежков

Стилизация вашего приложения React с использованием швы похож на использование библиотеки стилевых компонентов. Учитывая, что швы и стилизованные компоненты обе библиотеки CSS-in-JS, которые позволяют писать стили на JavaScript.

Прежде чем стилизовать приложение React, вы должны установить и настроить библиотеку стежков. Чтобы установить библиотеку с помощью npm, выполните в терминале следующую команду:

npm install @stitches/react

Альтернативно вы можете установить библиотеку с помощью пряжи с помощью этой команды:

yarn add @stitches/react

После установки библиотеки стежков вы можете приступить к стилизации своего приложения React.

Создание стилевых компонентов

Для создания стилизованных компонентов библиотека стежков предоставляет стильный функция. Функция styled позволяет создавать стилизованные компоненты, сочетающие стили 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 — более распространенный способ написания свойств CSS в JavaScript.

После создания стилизованного компонента кнопки вы можете импортировать его в свои компоненты React и использовать.

Например:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
Click Me</Button>
 </>
 );
}
exportdefault 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 и псевдокласс для Кнопка компонент. При наведении курсора на кнопку вложенный селектор &:наведите указатель мыши изменяет цвет фона и текста кнопки.

Стилизация с помощью функции 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 для кнопки, которые этот код затем присваивает кнопке кнопкаСтиль переменная. кнопкаСтиль Функция генерирует имя класса для определенных стилей, которое затем передается в функцию имя класса опора кнопка компонент.

Создание глобальных стилей

Используя швы библиотеке вы также можете определить глобальные стили для своего приложения, используя глобальныйCss функция. Функция globalCss создает и применяет глобальные стили к вашему приложению React.

После определения глобальных стилей с помощью глобальныйCSS, вызовите функцию в вашем приложение компонент для применения стилей к вашему приложению.

Например:

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

В этом примере определяются стили для тело элемент, используя глобальныйCss функция. Вызов устанавливает цвет фона на #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;

После рендеринга этого приложения в вашем интерфейсе появятся две кнопки. Кнопки будут выглядеть как на изображении ниже.

Создание токенов темы

швы Библиотека позволяет вам создавать набор токенов дизайна, которые определяют визуальные аспекты вашего пользовательского интерфейса, такие как цвета, типографика, интервалы и многое другое. Эти токены помогают поддерживать согласованность и упрощают обновление общих стилей вашего приложения.

Чтобы создать эти токены темы, используйте создать стежки функция. создать стежки Функция из библиотеки строчек позволяет настроить библиотеку. Обязательно используйте создать стежки функционировать в стежки.config.ts файл или стежки.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 чтобы установить отступ кнопки и переменную размера шрифта $1 чтобы установить размер шрифта кнопки.

Эффективная укладка с помощью стежков

Библиотека стежков предоставляет мощный и гибкий способ стилизации ваших приложений React. Благодаря таким функциям, как стилизованные компоненты, динамические стили и глобальный CSS, вы можете легко создавать сложные проекты. Независимо от того, создаете ли вы маленькое или большое приложение React, стежки могут стать отличным выбором для стилизации.

Отличной альтернативой библиотеке стежков является библиотека эмоций. Emotion — популярная библиотека CSS-in-JS, которая позволяет писать стили на JavaScript. Он прост в использовании и предлагает множество функций для создания отличных стилей для вашего приложения.