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

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

Основные выводы

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

Пошаговое руководство

1. Установите Emotion

Сначала вам нужно установить Emotion в ваш проект. Откройте терминал и перейдите в каталог вашего проекта. Выполните следующую команду, чтобы установить библиотеку emotion:

npm install @emotion/react @emotion/styled

2. import CSS

Вы можете использовать emotion в файле App.jsx. Вы должны импортировать emotion, чтобы использовать функцию css и импортировать стилизованный элемент. Добавьте следующее в верхнюю часть вашего файла:

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

3. стилизация с помощью шаблонных литералов

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

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

Этот код блокирует использование flexbox для обеспечения расположения макета.

4. Применение стиля

Чтобы применить заданный стиль, передайте переменную appStyle в поле className вашего основного HTML-элемента. Вот как это должно выглядеть:

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

5. Использование стилизованных компонентов

Помимо использования переменной css, вы также можете использовать стилизованные компоненты с помощью эмоций. Чтобы создать стилизованный компонент, можно воспользоваться следующим кодом:

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. Используйте эффекты наведения

Вы также можете легко определить эффекты наведения в ваших 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 стало возможным создавать реалистичные макеты пользовательского интерфейса. Emotion позволяет определять и эффективно управлять CSS непосредственно в JavaScript. Вы можете воспользоваться преимуществами плотности экрана и тесной интеграции между логикой и стилем.