Использование styled-components в Gatsby

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

При создании нового проекта Gatsby.js предоставляет несколько вариантов стилизации. Можно написать собственные таблицы стилей CSS/SCSS, установить фреймворки типа Bootstrap и/или использовать различные решения CSS-in-JS. Библиотека styled-components – одно из самых популярных решений CSS-in-JSS, и это неспроста. Это мощный, простой в освоении инструмент, который безупречно работает с Gatsby. В этом мануале мы посмотрим, как добавить библиотеку в свой проект.

В данном руководстве предполагается, что у вас уже есть рабочий проект Gatsby.js, который вы можете отредактировать. Если вам нужна помощь в создании такого проекта, обратитесь к статье Gatsby v2: с чего начать работу?

1: Установка styled-components

Установка библиотеки styled-components в наш проект Gatsby – чрезвычайно простой процесс, который состоит из двух этапов.

Установка зависимостей

Для начала нам просто нужно установить три обязательных зависимости от npm:

• styled-components: основной фреймворк стилизованных компонентов, который представляет собой очень гибкое средство CSS-in-JS, разработанное для React. Он автоматически обрабатывает SSR, автоматически вставляет префиксы и умеет многое другое. Ознакомиться с официальной документацией библиотеки вы можете здесь.
• gatsby-plugin-styled-components: официальный плагин Gatsby.js для стилизованных компонентов.
• babel-plugin-styled-components: плагин для Babel, который предоставляет более четкие имена классов, возможность рендеринга на серверной стороне, уменьшает размеры пакетов и делает многое другое. Gatsby зависит от этого плагина, но нам не нужно вручную редактировать файл .babelrc.

Давайте перейдем в корневой каталог проекта и запустим в командной строке следующее:

$ yarn add styled-components gatsby-plugin-styled-components babel-plugin-styled-components

Примечание: Все плагины можно установить с помощью npm, если вы предпочитаете использовать этот инструмент.

Добавление плагина в конфигурацию Gatsby

На втором этапе установки мы должны добавить плагин в конфигурацию Gatsby. Давайте поместим его в массив plugins в файле gatsby-config.js нашего проекта.

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Change plugin default options here, e.g.:
        // ssr: false
        // displayName: false,
        // minify: false
      },
    },
    //... other plugins
  ]
}

Здесь есть несколько опций для переопределения настроек по умолчанию (среди которых отключение минификации или рендеринга на стороне сервера). Их полный список и описание можно найти здесь, в документации.

Если вы не планируете настраивать параметры плагина, можно использовать более быстрый однострочный вариант:

module.exports = {
  ...
  plugins: [
    `gatsby-plugin-styled-components`,
     //... other plugins
  ]
}

Вот и все! Библиотека styled-components теперь установлена и готова к работе в нашем проекте Gatsby.

2: Использование библиотеки styled-components

Этот пост не является подробным уроком по использованию данной библиотеки – иначе он был бы длиннее в несколько раз. Здесь мы рассмотрим несколько быстрых примеров, которые хорошо продемонстрируют преимущества styled-components в Gatsby.

Создание новой страницы

Чтобы упростить задачу, давайте сначала создадим базовую демо-страницу, которая будет храниться в /src/pages/sc-demo.js.

import React from 'react';
import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet';

import Layout from '../components/layout';

class SCDemoPage extends React.Component {
  render() {
    const siteData = this.props.data.site.siteMetadata;
    const siteTitle = siteData.title;
    const siteDescription = siteData.description;

    return (
      <Layout location={this.props.location}>
        <Helmet
          htmlAttributes={{ lang: 'en' }}
          meta={[{
            name: 'description',
            content: siteDescription
          }]}
          title={siteTitle}
        />

        <section>
          <h2>Styled Components Demo</h2>

          <div>
            <h3>Banana Milkshakes</h3>
            <p>We'll definitely need frozen bananas
            and some milk.</p>

            <Link to='/'>To Homepage</Link>
          </div>
        </section>
      </Layout>
    )
  }
};

export default SCDemoPage;

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`;

Импорт и использование styled-components

Сейчас мы попробуем добавить несколько простых стилей в наш div Banana Milkshakes. Во-первых, мы импортируем styled-components в начале страницы, сразу после импорта Helmet:

import React from 'react';
import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet';

import styled from "styled-components"; // yay!

Затем прямо под импортом Layout мы создадим два стилизованных компонента. Первый компонент мы создадим для CustomBox, он будет применять стиль к HTML-элементу div.

Примечание: Обратите внимание на SASS-подобную вложенность.

const CustomBox = styled.div`
  border: 1px solid rgb(0, 143, 104);
  padding: 20px;

  h3 {
    color: rgb(109, 182, 91);
    margin: 0 0 10px;
    padding: 0;
  }
`

Читайте также: Навигация по страницам в Gatsby

Второй компонент применит стили к компоненту Link. Этот пример демонстрирует, что вы можете стилизовать практически любой компонент, а не только элементы HTML. Например, его можно использовать для настройки компонентов react-bootstrap.

const StyledLink = styled(Link)`
  color: red;
`

Важно: Обратите внимание на использование шаблонных литералов в обоих примерах выше.

Использование новых компонентов внутри страницы

Теперь мы можем применить наши новые компоненты. Во-первых, давайте заменим простой тег div, в который взята информация Banana Milkshakes, новым тегом CustomBox. Во-вторых, нам будет нужно заменить тег Link тегом StyledLink.

Вот как будет выглядеть код в результате:

<CustomBox>
  <h3>Banana Milkshakes</h3>
  <p>We'll definitely need frozen bananas
  and some milk.</p>
  <StyledLink to="/">To Homepage</StyledLink>
</CustomBox>

Вот и все! Если ваш сайт Gatsby еще запущен в режиме разработки, вы увидите, что стили обновятся сразу после сохранения файла.

Заключение

Добавить стилизованные компоненты в проект Gatsby.js совсем несложно. При этом библиотека styled-components может изменить очень многое. Этот простой мануал затрагивает лишь основы работы с ней, поэтому рекомендуем вам открыть документацию по styled-components, чтобы глубже изучить ее удивительные возможности.