Стилізація компонентів React стала значно простішою за останні роки. Тепер вам не потрібно створювати стилі з нуля — можна використовувати шаблонні стилі, яких зазвичай достатньо для малих проектів.
Але важливо розуміти, які CSS-бібліотеки варто використовувати у 2024 році для стилізації вашого додатку. Вибір правильної бібліотеки може заощадити багато часу з самого початку.
Тож давайте зануримось і дослідимо п’ять найкращих бібліотек, які ви можете використовувати для стилізації ваших React-додатків у 2024 році.
Я буду використовувати Bit для демонстрації кожної бібліотеки, оскільки з Bit набагато зручніше будувати сумісні додатки, ніж з традиційним додатком на React.
Отже, переконайтеся, що ви встановили Bit локально і ініціалізували порожнє робоче середовище, а також створили scope, щоб слідувати за інструкціями!
Щоб швидко ініціалізувати робоче середовище Bit, виконайте команду:
bit new basic css-workspace --default-scope \<\\>.\<\\> && cd css-workspace && bit start
Якщо ви хочете одразу зануритись у те, як працюють ці бібліотеки, перевірте це тут.
Підхід 01: StyleX
StyleX — це синтаксис JavaScript і компілятор для стилізації веб-додатків, розроблений командою Meta.
Це забезпечує ті ж переваги, що й стандартне рішення CSS-in-JS (і навіть більше), але без навантаження на продуктивність.
StyleX дозволяє усунути глобальні обмеження CSS і створювати більше компонентно прив’язаних конфігурацій CSS, що стають легшими для відлагодження, масштабування та підтримки. Крім того, він пропонує безпечний тип для написання CSS в JavaScript, який на етапі побудови трансформується в звичайний CSS.
Ви можете інтегрувати StyleX у ваші компоненти React за допомогою Bit всього за кілька кроків:
По-перше, потрібно переконатися, що ваше робоче середовище підтримує створення компонентів StyleX.
На щастя для нас, команда Bit вже створила середовище StyleX + React, яке ми можемо використовувати для створення наших компонентів.
Все, що нам потрібно зробити, це скористатися цим!
Створіть компонент React, який використовує StyleX для стилізації, за допомогою команди:
bit create stylex stlyex/button --env learnbit-react.stylex/envs/react-stylex
Після виконання команди ви побачите результат:
Далі відкрийте файл button.tsx, і ви зможете працювати з StyleX, як показано нижче:
import { type ReactNode, type HTMLAttributes } from 'react';
import * as stylex from '@stylexjs/stylex';
import type { StyleXStyles } from '@stylexjs/stylex';
const styles = stylex.create({
base: {
fontSize: 32,
color: '#eeeaee',
backgroundColor: {
default: '#720b72',
':hover': '#a93da9',
},
padding: 12,
borderRadius: 8,
borderColor: 'unset',
},
});
export type ButtonProps = {
children?: ReactNode;
style?: StyleXStyles;
} & Omit<HTMLAttributes<HTMLButtonElement>, 'style'>;
export function Button({ children, style }: ButtonProps) {
return (
<button style={style}>{children}</button>
);
}
Ви можете оновити композиції і забезпечити візуальний вивід для ваших компонентів, оновивши button.composition.tsx:
import React from 'react';
import { Button } from './button';
export const BasicButton = () => {
return (
<Button>Hello World!</Button>
);
}
export const StyledButton = () => {
return (
<Button style={{ color: 'blue' }}>Blue Text Button!</Button>
);
}
Це надасть набір варіацій, які можна переглянути.
Далі ви можете відкрити сервер Bit і побачити компонент StyleX:
Це було просто, правда? Ви можете працювати з StyleX за допомогою Bit всього кількома командами!
Щоб побачити повну реалізацію, перегляньте мій компонент React + StyleX.
Підхід 02: Styled Components
Styled Components дозволяє вам писати CSS в JS при створенні власних компонентів у React.js.
Це дозволяє вам підтримувати ваш CSS код прямо в JavaScript файлі і писати підтримуваний CSS.
Щоб створити компонент React, який використовує Styled-Components, я створив середовище, яке ви можете використовувати. Просто виконайте команду для створення простого компонента React:
bit create react styled/button --env dummyorg.react-css/envs/react-styled
Ви повинні побачити результат:
Ви можете безпосередньо додати власний CSS стиль до вашого компонента, або ви можете створити більше утилітних компонентів в Bit, які містять конфігурації вашої теми.
Для детального пояснення цього, перегляньте:
[
Створення багаторазових компонентів React з використанням styled-components
blog.bitsrc.io
](/building-reusable-react-components-with-styled-components-e01f4f9ed844?source=post_page-----061b8fd93fa2--------------------------------)
Але для простого впровадження, щоб допомогти вам почати, відкрийте файл button.tsx у вашій директорії styled та додайте код:
import React from 'react';
import type { ReactNode } from 'react';
import styled from 'styled-components';
import { css } from 'styled-components';
export type ButtonProps = {
children?: ReactNode;
isPrimary?: boolean
};
const StyledButton = styled.a\<{ primary?: boolean; }\>`
--accent-color: blue;
background: transparent;
border-radius: 3px;
border: 1px solid var(--accent-color);
color: var(--accent-color);
display: inline-block;
margin: 1rem;
padding: 1rem 0;
transition: all 200ms ease-in-out;
width: 11rem;
&:hover {
filter: brightness(0.85);
}
&:active {
filter: brightness(1);
}
${props =\> props.primary && css`
background: var(--accent-color);
color: white;
`}
`
export function Button({ children, isPrimary = false }: ButtonProps) {
return (
\
{children}
\
);
}
Як ви можете побачити, ми використали Styled-Components для створення StyledButton і обгортаємо його реалізацію у наш власний компонент Button.
Далі, ви можете налаштувати ваші композиції, щоб продемонструвати різні варіації, які ми створили — Primary/Secondary:
import React from 'react';
import { Button } from './button';
export const BasicButton = () =\> {
return (
\Basic Button\
);
}
export const PrimaryButton = () =\> {
return (
\
Primary Button
\
);
}
Після цього ви можете перейти до свого сервера Bit, щоб побачити Styled-Component Button:
Щоб переглянути повну реалізацію, перегляньте мій демонстраційний компонент.
Підхід 03: Sass
Sass/SCSS був замінником CSS завдяки розширеним функціям, які він надає.
SCSS дозволяє вкладати CSS, вводити змінні та працювати з міксинами.
Використовуючи ці функції, ви можете створювати потужний CSS код з мінімальними зусиллями.
Зазвичай вам потрібно налаштувати SCSS, щоб ваш компілятор міг читати файли .scss. Але з Bit це вже доступно за замовчуванням і дуже легко працювати з SCSS/Sass.
Для цього створіть базовий компонент React за допомогою Bit:
bit create react scss/button
Ви побачите наступний результат:
Далі розгорніть директорію scss/button і створіть файл — <>.scss. У нашому випадку це буде button.scss.
Після цього ви побачите результат:
Далі відкрийте файл button.scss і налаштуйте специфічні SCSS конфігурації для вашого компонента:
.button {
padding: 10px;
margin: 10px;
font-size: 18px;
border-color: unset;
}
.purple {
background: #8d2ee6;
}
Тепер відкрийте ваш файл button.tsx, щоб підключити SCSS файл:
import React from 'react';
import type { ReactNode } from 'react';
import './button.scss';
export type ButtonProps = {
children?: ReactNode;
};
export function Button({ children }: ButtonProps) {
return (
\
{children} \ );
}
Далі відкрийте сервер Bit, і ви побачите, як ваші SCSS стилі застосовані до кнопки:
Щоб побачити повну реалізацію, перегляньте цю кнопку.
Підхід 04: Tailwind
Tailwind — це UI бібліотека, яка повністю базується на CSS.
Це схоже на Bootstrap, але більш розвинене! Воно дозволяє створювати складні UI компоненти, такі як таблиці, сітки, картки, аватари, використовуючи кілька CSS класів.
Але налаштування Tailwind не є легким. Вам потрібно створити компілятор Tailwind і оновити процес зборки для компіляції CSS Tailwind. Але, на щастя для нас...
Команда Bit створила середовище для Tailwind, яке ми можемо використовувати для створення компонентів на базі Tailwind.
Для цього виконайте команду:
bit create react tailwind/button --env learnbit-react.tailwind/tailwind-env
Після цього ви побачите такий результат:
Далі відкрийте файл button.tsx і давайте напишемо трохи Tailwind:
import type { ButtonHTMLAttributes, ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
export type ButtonProps = {
children?: ReactNode;
} & ButtonHTMLAttributes<{}>;
export function Button({ children, className, ...rest }: ButtonProps) {
const classes = twMerge(
'inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
className
);
return (
<button className={classes} {...rest}>
{children}
</button>
);
}
Далі давайте додамо композицію для визначення результату.
import { Button } from './button';
import '@learnbit/styling.config.tailwind/globals.tailwind.css';
export const BasicButton = () => {
return <Button>Hello World</Button>;
};
Після цього поверніться до сервера Bit для розробки і ви повинні побачити результат:
Щоб побачити повну реалізацію, перегляньте цей компонент на Bit Cloud.
Підхід 05: Emotion
Нарешті, у нас є Emotion.
Emotion дуже схожий на styled-components. Він дозволяє створювати стилізовані компоненти з кастомними CSS або автоматично створювати className для CSS-функції, яку ви надаєте. Це чітко показано в їхній документації:
Працювати з Emotion дійсно просто. Я створив середовище для розробки, яке ви можете використовувати для того, щоб одразу почати працювати з Emotion CSS.
Для цього створіть React компонент за допомогою цієї команди:
bit create react emotion/button --env dummyorg.react-css/envs/react-emotion
Ви повинні побачити такий результат:
Далі відкрийте файл emotion/button/button.tsx і почніть створювати свій React компонент з Emotion, як показано нижче:
import React from 'react';
import type { ReactNode } from 'react';
import { css } from '@emotion/css'
const color = 'white'
export type ButtonProps = {
children?: ReactNode;
};
export function Button({ children }: ButtonProps) {
return (
\
{children} \ );
}
Далі, поверніться до вашого сервера розробки і ви повинні побачити результат кнопки кольору hotpink.
Для детальної реалізації, ви можете перевірити повний компонент тут.
Підсумки
І це так просто! Ці бібліотеки можуть бути досить важкими для налаштування, якщо ви робите це самостійно.
Але якщо ви працюєте з інструментами, як-от Bit, це стає легким завданням, оскільки існує безліч компонентів та середовищ для повторного використання, які ви можете інтегрувати у свій робочий процес.
Сподіваюся, ви зрозуміли кожну з цих бібліотек і тепер готові вибрати правильну для вашого наступного великого React-проекту у 2024 році!
Щоб переглянути повний код, перевірте мій Bit Scope.
Дякую за прочитане.
Дізнайтеся більше
[
5 інструментів і шаблонів для типобезпечних API
Опис змінено
blog.bitsrc.io
](/5-tools-and-patterns-for-typesafe-apis-72dd6db17a76?source=post_page-----061b8fd93fa2--------------------------------)
[
Створення повторно використовуваних AI компонентів
Опис змінено
blog.bitsrc.io
](/building-reusable-ai-components-e9e89be1e0c7?source=post_page-----061b8fd93fa2--------------------------------)
[
Сучасний підхід до розробки на Next.js
Опис змінено
blog.bitsrc.io
](/a-modern-approach-to-next-js-development-0cf7d4357350?source=post_page-----061b8fd93fa2--------------------------------)
[
Як ми будуємо систему дизайну компонентів
В цій статті я покажу і поясню наш процес створення системи дизайну.
Я поділюсь реальними прикладами на кожному етапі…
blog.bitsrc.io
](/how-we-build-our-design-system-15713a1f1833?source=post_page-----061b8fd93fa2--------------------------------)
[
Сучасний підхід до розробки на Angular
Опис змінено
blog.bitsrc.io
](/modern-angular-development-b469341a3620?source=post_page-----061b8fd93fa2--------------------------------)
[
Сучасний підхід до розробки на React
Опис змінено
blog.bitsrc.io
](/modern-approach-to-react-development-090358b04e7d?source=post_page-----061b8fd93fa2--------------------------------)
[
3 способи почати роботу з React додатком у 2024 році
Опис змінено
blog.bitsrc.io
](/3-ways-to-create-a-react-app-in-2024-e50e67f36a62?source=post_page-----061b8fd93fa2--------------------------------)
Перекладено з: Top 5 Ways to Style Your React Apps in 2024