Условное оформление — важнейший аспект разработки современных веб-приложений. В этой статье блога мы рассмотрим различные методы реализации условного стиля в Styled Components, популярной библиотеке CSS-in-JS. Мы будем использовать разговорный язык и приведем примеры кода, которые помогут вам понять и эффективно применять эти методы.

Метод 1: Тернарный оператор

Тернарный оператор – это краткий способ условного применения стилей в стилизованных компонентах. Вот пример:

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${({ isActive }) => isActive ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

В приведенном выше коде свойство isActiveопределяет, должен ли кнопка иметь синий или серый фон.

Метод 2: оператор &&

Оператор &&— еще один мощный инструмент для условного оформления. Рассмотрим следующий пример:

import styled from 'styled-components';
const Container = styled.div`
  display: flex;
  justify-content: ${({ isCentered }) => isCentered && 'center'};
`;

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

Метод 3: вспомогательная функция CSS

Стилизованные компоненты позволяют определять вспомогательные функции, которые генерируют CSS на основе условий. Вот пример:

import styled, { css } from 'styled-components';
const Text = styled.p`
  ${({ isBold }) => isBold && css`
    font-weight: bold;
  `}
`;

Свойство isBoldвключает стиль font-weight: bold;, если установлено значение true.

Метод 4. Библиотека имен классов

Библиотека Classnames — это удобная утилита для управления сложными именами классов в стилевых компонентах. Вот пример:

import styled from 'styled-components';
import classNames from 'classnames';
const Button = styled.button`
  padding: 10px 20px;
  ${({ isActive }) => classNames({ active: isActive })}
`;

Используя имена классов, мы можем условно добавить класс activeк кнопке на основе свойства isActive.

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