Стилизиране на React компоненти с Емоция

Искате да управлявате стилизирането на React компоненти по модерен и мощен начин? С библиотеката Emotion можете да вграждате CSS директно в своите React компоненти и така да оформяте ефективно потребителския си интерфейс. В това ръководство ще ви обясня основите на стилизирането с Emotion, как да инсталирате и приложите библиотеката и ще ви дам някои полезни съвети по въпроса.

Най-важни открития

• Emotion ви позволява да пишете CSS в JavaScript и предлага интуитивно управление.
• С Emotion можете да използвате различни техники за стилизиране, включително шаблони за литерали и използването на css-Props.
• Управлението на стиловете става по-модулено с използването на Emotion, което подобрява повторната употреба и четимостта.

Инструкции стъпка по стъпка

1. Инсталиране на Emotion

Първо трябва да инсталирате Emotion в проекта си. Отворете терминала и преминете към директорията на проекта си. Тук изпълнете следния команден ред, за да инсталирате библиотеката emotion:

npm install @emotion/react @emotion/styled

2. Импортиране на CSS

Във вашия файл App.jsx можете да използвате Emotion. Трябва да импортирате Emotion, за да използвате функцията за css и да импортирате елемента styled. Добавете следното в началото на вашия файл:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Стилизиране с Template Literals

Използвайте функцията css на Emotion, за да създадете CSS променлива. Определете конвенциите на CSS с помощта на шаблонни литерали. Ето един пример как да напишете клас Wrapper за вашето приложение:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px;
`;

Този код използва flexbox, за да създаде аранжимент на макета.

4. Прилагане на стила

За да приложите дефинирания стил, прехвърлете променливата appStyle в className атрибута на основния си HTML елемент. Ето как трябва да изглежда това:

function App() { return <div css={appStyle}>Hallo Welt!</div>;
}

5. Използване на Styled-Компоненти

Допълнително към използването на css променлива, можете също да използвате Styled-Компоненти с Emotion. За да създадете Styled-Компонент, можете да използвате следния код:

const Container = styled.div` padding: 20px; background-color: lightblue;
`;

Това прави Container един нов компонент, базиран на CSS, който има всички дефинирани стилове.

6. Вмъкване на Заявки за медия

Emotion прави лесно вграждането на заявки за медия във вашия CSS. Просто ги добавете в шаблонния литерал:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; }
`;

Този заявка за медия променя размера на шрифта на текста, когато широчината на дисплея е по-малка от 600 пиксела.

7. Прилагане на ефекти Hover

Също така можете лесно да дефинирате ефекти Hover във вашите CSS шаблони:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Тази CSS правило променя цвета на фона на елемента при преминаване с мишката върху него.

8. Комбиниране на по-комплексни стилове

Emotion позволява комбиниране на няколко имена на класове. Това става възможно с функцията cx:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

В този случай текстът се показва както в синьо, така и в червено.

9. Бъдещи разширения

Ако управлявате голям проект в бъдеще, може да бъде полезно да организирате стиловете си в различни модули. Например, можете да създадете commonStyles.js и да експортирате основните си стилове там:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Вече можете да вмъкнете flexCenter във всяка друга компонента.

10. Тестове и корекции

Заредете вашето приложение в браузъра и проверете дали стиловете се показват правилно. Експериментирайте с различни стилове и вижте резултата в реално време.

Резюме

С комбинация от Emotion и React е възможно да се създават реалистични UI-застроителства. Emotion позволява да дефинирате и управлявате CSS директно в JavaScript на ефективен начин. При това можете да се възползвате от предимствата на плътния екран и от тясната интеграция между логиката и стилизирането.