Стилизация кода React и библиотека emotion

Development, Java | Amber | Комментировать запись

Стилизовать компоненты в React можно напрямую – с помощью свойства style, которое принимает объект со свойствами стиля. В большинстве случаев этого более чем достаточно. Однако в style невозможно указать более подробные значения по умолчанию в качестве отдельного свойства, а еще здесь практически отсутствует поддержка !important. К счастью, эти недостатки легко обойти.

emotion – гибкая и высокопроизводительная библиотека CSS-in-JS. Она принимает строки и объекты, поддерживает переменные по умолчанию и расширяемые переменные, а с дополнительным плагином Babel – даже встроенные дочерние селекторы!

Установка библиотеки emotion

Для начала нам нужно установить зависимости, emotion и emotion-react. Это можно сделать с помощью npm:

$ npm install --save emotion emotion-react

или через yarn:

$ yarn add emotion emotion-react

Обязательно включите react-emotion в исходный код вашего компонента:

import styled, { css } from "react-emotion";

Использование библиотеки emotion

А теперь давайте поговорим о различных способах стилизации компонентов с помощью emotion.

Самый быстрый способ начать работу с emotion – передать css в свойство className элемента или компонента.

css принимает стили в виде строки, тегированного шаблонного литерала, объекта или массива.

Например, вот так CSS принимает строки и объекты:

<div className={css`background: #eee;`}>

  <div className={css({ padding: 10 })}>

    Hooray, styles!

  </div>
</div>

В дополнение к css для создания элементов и их стилей также можно использовать styled.

Подобно css, styled принимает строки, тегированные шаблонные литералы, объекты или массивы.

Если вы создаете элемент с помощью styled, вы можете затем создать новые элементы со свойствами, которые позже можно использовать в стилях. Это упрощает пользовательскую настройку и повторное использование элементов кода:

const Heading = styled("h1")`

  background-color: ${props => props.bg};

  color: ${props => props.fg};

`;

Этот код создает компонент Heading, который принимает свойства bg и fg – они задают цвет фона и текста:

<Heading bg="#008f68" fg="#fae042">

  Heading with yellow text and a green background!

</Heading>

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

const Subheading = Heading.withComponent("h2");

Сами по себе свойства не являются обязательными, поэтому вы можете включать либо опускать их по своему усмотрению.

<Subheading fg="#6db65b">

  Subheading with default colors!

</Subheading>

<Subheading fg="#6db65b">

  Subheading with light green text!

</Subheading>

<Subheading bg="#6db65b">

  Subheading with light green background!

</Subheading>

Как и в css, здесь вы можете задать стили в виде объекта, а не строки:

const Quote = styled("blockquote")(props => ({
fontSize: props.size,
}));

и даже включить объект стилей по умолчанию:

const Cite = styled("cite")(
{
fontWeight: 100
},
props => ({
fontWeight: props.weight
})
);

Их можно дополнительно установить при использовании компонента:

<Cite>

  Citation with light text!

</Cite>

<Cite weight={700}>

  Citation with heavy text!

</Cite>

И конечно, как мы уже говорили, библиотека emotion без проблем принимает стили через !important:

const Footer = styled("footer")`

  margin-top: 50px !important;

`;

Итоги

Только что мы рассмотрели несколько отдельных примеров использования библиотеки emotion. А теперь давайте попробуем объединить их в более связный пример. У нас получилось следующее:

import React from "react";

import { render } from "react-dom";

import styled, { css } from "react-emotion";

const Heading = styled("h1")`

  background-color: ${props => props.bg};

  color: ${props => props.fg};

`;

const Subheading = Heading.withComponent("h2");

const Quote = styled("blockquote")(props => ({

  fontSize: props.size

}));

const Cite = styled("cite")(

  {

    fontWeight: 100

  },

  props => ({

    fontWeight: props.weight

  })

);

const Footer = styled("footer")`

  border-top: 1px solid #ccc;

  color: #ccc;

  margin-top: 50px !important;

  padding-top: 20px;

`;

function App() {

  return (

    <div className={css`background: #ddd;`}>

      <div className={css({ padding: 10 })}>

        <Heading bg="#008f68" fg="#fae042">

          Gator Lyrics

        </Heading>

        <Subheading fg="#6db65b">

          Lyrics from songs that contain the word "alligator"

        </Subheading>

        <Quote size={28}>

          See you later, alligator. After a while, crocodile.

        </Quote>

        <Cite weight={700}>Bill Haley</Cite>

        <Footer>EOF</Footer>

      </div>

    </div>

  );

}

const container = document.createElement("div");

document.body.appendChild(container);

render(<App />, container);

Теперь вы знаете, как создавать стили в приложении React с помощью emotion.

Приведенный выше код можно также найти в этой песочнице CodeSandbox.

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