3 основных принципа для начала работы со стилями-компонентами

Этот пост изначально был опубликован на моем личном сайте.

Я люблю styled-components. Я использую эту библиотеку для всех своих личных проектов (в том числе для своего личного сайта). Он очень мощный и также очень простой в использовании. В этой статье я расскажу о 3 основных вещах, которые вы можете делать с styled-components, так что вы можете начать использовать его прямо сейчас.

Но сначала… Что такое стилизованные компоненты?

«Styled-components - это результат размышлений о том, как мы могли бы улучшить CSS для стилизации систем компонентов React»

styled-components - это библиотека, которая позволяет вам писать актуальный код CSS для стилизации ваших компонентов, удаляя сопоставление между компонентами и стилями. Он использует тегированные шаблонные литералы и CSS. Вот и все.

А все остальное библиотека сделает за вас:

Он отслеживает, какие компоненты отображаются, и внедряет их стили.
Он использует разделение кода, поэтому ваши пользователи загружают наименьшее количество необходимого кода.
Он генерирует уникальные имена классов для ваших стилей, поэтому вам не нужно беспокоиться о дублировании или наложении.
Он показывает, какие стили вы не используете (поскольку они привязаны к определенному компоненту), поэтому вы можете легко удалить их. Обычно это сложно при работе с CSS.
Он автоматически префиксов вашего CSS для работы с различными поставщиками. Вы можете просто написать свой CSS в соответствии с текущим стандартом, а остальное сделает styled-components.

Все звучит отлично, но вы можете подумать, что вам недостаточно писать CSS, что вам нужны динамические стили. Не волнуйтесь, styled-components позволяет очень легко стилизовать компоненты на основе свойств или глобальных тем.

Вы готовы начать с этого? Обещаю, это будет очень просто! Давайте посмотрим, 3 важные вещи, которые вы можете делать с этой библиотекой.

Вы можете найти весь код, который мы объясним, в этой CodeSandbox.

1- Создайте и используйте свой первый стилизованный компонент

Сначала вам необходимо установить библиотеку:

npm i --save styled-components

Теперь предположим, что мы хотим создать домашнюю страницу, на которой мы отображаем заголовок в центре экрана. Что-то вроде этого:

Очень простой. Нам нужны теги div и h1. У div будет такой код CSS:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;

Допустим, мы хотим, чтобы h1 был подчеркнут:

text-decoration: underline;

Давайте сделаем это с styled-components!

Чтобы код был хорошо структурирован, давайте создадим папку components/Home и два файла внутри нее: index.js и styles.js.

В нашем styles файле мы будем создавать стилизованные компоненты.

Начнем с импорта библиотеки:

import styled from "styled-components";

Теперь, чтобы создать стилизованный компонент, нам нужно написать style., а затем HTML-тег, который мы хотим стилизовать. В этом случае нам сначала понадобится div, так что давайте начнем с него. Кроме того, давайте сохраним этот компонент в переменной и экспортируем его, чтобы позже мы могли импортировать его из нашего index файла.

export const Home = styled.div``;

Осталось только написать наши стили! А поскольку мы можем написать обычный CSS с обратными кавычками, это очень просто:

export const Home = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

Поздравляю! Вы написали свой первый стилизованный компонент! 🎉

Давайте продолжим и также добавим наш компонент Title, который будет стилизованным тегом h1. Весь styles файл будет выглядеть так:

import styled from "styled-components";

export const Home = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

export const Title = styled.h1`
  text-decoration: underline;
`;

Большой! Теперь нам нужно использовать эти компоненты. Для этого нам нужно импортировать их из наших index файлов.

Мы могли сделать это:

import React from "react";
import { Home, Title } from "./styles";

export default function Home() {
  return...
}

Но обратите внимание, что теперь у меня есть два компонента с именем Home, так что это просто не сработает. Один из вариантов - присвоить стилизованным компонентам разные имена. Вместо того, чтобы называть его Home, вы можете называть его Wrapper, Container или что-то в этом роде.

Многие люди используют этот подход, и он работает. Но лично мне это не нравится. Я хочу иметь возможность называть мой стилизованный компонент так же, как и родительский компонент. К счастью, многие люди думают так же, поэтому кто-то придумал другой подход, который мне нравится:

import React from "react";
import * as S from "./styles";

Мы можем импортировать все наши стилизованные компоненты как переменную с именем S, а затем мы можем визуализировать их, используя эту переменную. Помните, что стилизованные компоненты похожи на обычные компоненты, поэтому вы визуализируете их, используя JSX, как обычно:

import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <S.Title>This is the Home page</S.Title>
    </S.Home>
  );
}

Мы получаем доступ к нашим стилизованным компонентам, записывая S., а затем имя компонента. Мне нравится этот подход, потому что теперь я могу назвать свой стилизованный компонент Home, а также беглым взглядом я могу сказать, какие из возвращенных компонентов на самом деле являются стилизованными компонентами (в данном случае все они, кроме может не подходить для более длинных и сложных компонентов).

Стили вложения

Прежде чем перейти к шагу 2, небольшое примечание о вложении. Вы можете вкладывать стили так же, как и в SASS. В этом случае мы могли бы, например, избавиться от компонента Title. Мы можем просто добавить стили для всех h1, существующих в нашем Home компоненте:

import styled from "styled-components";

export const Home = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

  h1 {
    text-decoration: underline;
  }
`;

А если мы изменим и родительский компонент…

import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <h1>This is the Home page</h1>
    </S.Home>
  );
}

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

2- Используйте реквизит для динамического моделирования

Помните, что стилизованные компоненты - это просто компоненты, поэтому они могут получать реквизиты. И этот реквизит может быть полезен для динамического изменения стилей.

Наш пример очень прост, но предположим, что мы хотим установить цвет текста заголовка на основе свойства с именем titleColor.

Во-первых, давайте передадим эту опору при рендеринге нашего компонента в стиле Title:

import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <S.Title titleColor="blue">This is the Home page</S.Title>
    </S.Home>
  );
}

А теперь давайте воспользуемся этой опорой, чтобы изменить цвет текста. Нам нужно использовать ${}, чтобы получить доступ к реквизитам. Все очень просто:

export const Title = styled.h1`
  text-decoration: underline;
  color: ${prop => prop.titleColor};
`;

Это сделает текст синим:

Вы также можете использовать реквизиты для условного стиля. Например, допустим, мы передаем опору small:

import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <S.Title titleColor="blue" small>
        This is the Home page
      </S.Title>
    </S.Home>
  );
}

Если он есть, мы хотим сделать текст меньше. Но если это не так, мы хотим, чтобы размер текста был стандартным.

export const Title = styled.h1`
  text-decoration: underline;
  color: ${prop => prop.titleColor};
  font-size: ${prop => prop.small && "1.25rem"};
`;

Потрясающие! Теперь вы знаете, как динамически стилизовать компоненты на основе реквизита.

3- Создание глобальных стилей

Создавать стилизованные компоненты - это здорово, но иногда нам нужны глобальные стили. Вы можете применить стили, используя теги в качестве селекторов. Например, предположим, что мы хотим изменить цвет фона нашего body.

К счастью, styled-components делает это очень просто. Начните с импорта createGlobalStyle:

import { createGlobalStyle } from "styled-components";

Напишите свои глобальные стили:

const GlobalStyle = createGlobalStyle`
  body {
    background: lightblue;
  }
`;

А затем поместите этот компонент на верхний уровень вашего приложения, в моем случае мой index.js файл:

import React from "react";
import ReactDOM from "react-dom";
import { createGlobalStyle } from "styled-components";

import App from "./App";

const GlobalStyles = createGlobalStyle`
  body {
    background: lightblue;
  }
`;

const rootElement = document.getElementById("root");
ReactDOM.render(
  <>
    <GlobalStyles />
    <App />
  </>,
  rootElement
);

Вот и все! Это изменит цвет фона:

При желании вы также можете использовать реквизиты для динамического изменения глобальных стилей (например, если в вашем приложении есть светлая и темная тема).

Вот и все!

Надеюсь, этот пост был полезен. Теперь вы знаете основы работы с styled-components. Конечно, это еще не все, поэтому обязательно ознакомьтесь с официальной документацией.

Спасибо за чтение ❤️

Первоначально опубликовано на моем личном сайте 10 мая 2020 г.

3 основных принципа для начала работы со стилями-компонентами