Обработка CSS в React через styled-components

22 декабря, 2021 11:36 дп 889 views | Комментариев нет

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

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

Жизненный цикл большинства библиотек выглядит так: они выходят, набирают популярность, а затем их заменяет лучшее и более современное решение. Библиотека styled-components сейчас находится на пике популярности.

Как начать работу с styled-components

Создатель библиотеки styled-components также разработал шаблон react-boilerplate, один из самых популярных способов создания проектов в React.

Шаблон включает в себя styled-components. Если вы запускаете новое приложение с нуля, имеет смысл просто использовать react-boilerplate.

Для начала клонируем репозиторий:

$ git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git

А затем перейдем в его каталог и запустим:

npm run setup

Шаблон представляет собой образец приложения, которое очень удобно использовать в качестве стартовой точки для разработки, а в нашем случае – для изучения библиотеки styled-components.

Запустите его с помощью команды npm start и откройте свое приложение по адресу http://localhost:3000.

Компоненты в нашем тестовом приложении уже используют библиотеку styled-components. Давайте взглянем на app/containers/App/index.js:

// ...other imports
import styled from 'styled-components';

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  /* ... */
`;

export default function App() {
  return (
    <AppWrapper>
      {/* ... */}
    </AppWrapper>
  );
}

Это стилизованный компонент, связанный с контейнером AppWrapper, отвечающий за визуализацию оболочки страницы. Полученная в результате модель DOM будет элементом div с примененным стилем.

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

Попробуйте уменьшить максимальную ширину до 500 пикселей:

const AppWrapper = styled.div`
  max-width: 500px;
  /* ... */
`;

И сохраните файл. Затем посмотрите на свою страницу в браузере – ее ширина должна измениться.

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

Забудьте о классах

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

Стандартный рабочий процесс при создании веб-интерфейса с помощью CSS выглядит так:

Вы создаете HTML структуру с уникальными классами или атрибутами id.
Вы настраиваете целевые элементы с помощью селекторов классов или идентификаторов в CSS.

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

Командная работа обычно подразумевает наличие соглашений об именах. Но их легко обойти, когда дело доходит до внесения быстрых исправлений (не при планировании исходной структуры проекта). Styled-components на ходу создает классы с уникальными именами для всех элементов.

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

Библиотека styled-components и CSS

Некоторые из существующих библиотек CSS-in-JS позволяют писать CSS на JavaScript в форме объектов JavaScript. Это иногда становится препятствием для многих дизайнеров, которые знают CSS, но не знают JavaScript.

Библиотека styled-components применяет шаблонные литералы JavaScript, чтобы вы могли фактически писать CSS, который затем можно просто скопировать из файлов CSS и вставить в другое место.

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

 @media (max-width: 700px) {
 .app-wrapper {
    background: white;
 }
}

Нужно писать это:

const AppWrapper = styled.div`
  /* ... */
  @media (max-width: 700px) {
    background: white;
  }
`;

Простой и быстрый CSS

По сути библиотека styled-components – это простой, но немного улучшенный CSS.

Библиотека поддерживает вложение CSS, одно из основных преимуществ большинства CSS-препроцессоров. Давайте для практики попробуем перевернуть любое изображение на странице:

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  /* ... */

  img {
    transform: scaleX(-1);
  }
`;

Она также обрабатывает префиксы вендоров при помощи inline-style-prefixer. В приведенном выше примере параметр transform добавляет эти префиксы к сгенерированному CSS:

.fpcXGq img {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

Пользовательская настройка компонентов

К примеру, мы хотите сделать правую кнопку серой, а не синей. Мы можем легко перезаписать это конкретное свойство CSS. Кнопки представляют собой два экземпляра HeaderLink, который является компонентом Link из react-router-dom с некоторыми стилями. Откройте /app/components/Header/HeaderLink.js:

import { Link } from 'react-router-dom';
import styled from 'styled-components';

export default styled(Link)`
  /* ... */
  border: 2px solid #41ADDD;
  color: #41ADDD;

  /* ... */
`;

Итак, сделать кнопку серой довольно просто. Откройте /app/components/Header/GrayHeaderLink.js:

import styled from 'styled-components';
import HeaderLink from './HeaderLink';

const GrayHeaderLink = styled(HeaderLink)`
  color: darkgray;
  border: 2px solid darkgray;
`;

И используйте этот компонент в JSX. От:

<NavBar>
 <HeaderLink to="/">
   {/* ...children */}
 </HeaderLink>

 <HeaderLink to="/features">
   {/*...children */}
 </HeaderLink>
</NavBar>

До:

<NavBar>
 <GrayHeaderLink to="/">
   {/* ...children */}
 </GrayHeaderLink>

 <GrayHeaderLink to="/features">
   {/* ...children */}
 </GrayHeaderLink>
</NavBar>

Этот подход отлично работает, если вы не владеете своими компонентами. В данном случае ссылка пришла из пакета response-router-dom, который мы не могли контролировать.

В противном случае все еще проще. Вот стиль кнопки по умолчанию в app/components/Button/buttonStyles.js:

import { css } from 'styled-components';

const buttonStyles = css`
  /* ... */
  border: 2px solid #41addd;
  color: #41addd;

  /* ... */
`;

export default buttonStyles;

Примечание: Обратите внимание на вспомогательный компонент css, который позволяет использовать интерполяции внутри ваших правил CSS.

Вставка простого свойства в шаблонный литерал позволит нам создать в компоненте другой стиль – выбрать цвет на основе значения этого свойства:

const buttonStyles = css`
  /* ... */

  border: 2px solid ${(props) => props.gray ? 'darkgray' : '#41addd'};
  color: ${(props) => props.gray ? 'darkgray' : '#41addd'};

  /* ... */
`;

Затем нужно экспортировать компонент StyledButton с помощью следующего синтаксиса:

import styled from 'styled-components';

import buttonStyles from './buttonStyles';

const StyledButton = styled.button`${buttonStyles}`;

export default StyledButton;

Теперь вы можете сделать кнопку серой, просто написав:

<StyledButton gray />

Заключение

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

Изучить все доступные стилизованные компоненты можно в официальной документации.

Tags: CSS, CSS-in-JS, DOM, Javascript

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.