В этой статье мы рассмотрим различные методы добавления условного CSS к стилизованным компонентам в React. Styled Components — популярная библиотека, которая позволяет писать CSS на JavaScript, что упрощает стилизацию компонентов React. Добавляя условный CSS, вы можете динамически применять стили в зависимости от определенных условий, повышая гибкость и скорость реагирования вашего приложения. Давайте углубимся в различные методы на примерах кода.

Метод 1: использование троичных операторов
Один из самых простых способов применения условного CSS — использование троичных операторов в стилизованных компонентах. Вот пример:

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

В приведенном выше коде цвет фона компонента Buttonбудет синим, если свойство primaryистинно, и серым в противном случае.

Метод 2: использование библиотек CSS-in-JS.
Стилизованные компоненты поддерживают различные библиотеки CSS-in-JS, такие как polishedи styled-theming, которые предоставить дополнительные утилиты для условного стиля. Например, используя polished, вы можете применять разные стили в зависимости от условия:

import styled from 'styled-components';
import { ifProp } from 'polished';
const Heading = styled.h1`
  color: ${ifProp('isDark', 'black', 'white')};
  background-color: ${ifProp('isDark', 'white', 'black')};
`;

В приведенном выше примере компонент Headingбудет иметь разные цвета текста и фона в зависимости от значения свойства isDark.

Метод 3: модули CSS и имена классов
Если вы предпочитаете более традиционный подход CSS, вы можете комбинировать стилизованные компоненты с модулями CSS и именами классов. Это позволяет вам определять условные стили с помощью классов CSS. Вот пример:

import React from 'react';
import styles from './Button.module.css';
import classNames from 'classnames';
const Button = ({ primary }) => {
  const buttonClass = classNames(styles.button, {
    [styles.primary]: primary,
    [styles.secondary]: !primary,
  });
  return <button className={buttonClass}>Click me</button>;
};
export default Button;

В этом случае компонент Buttonиспользует модули CSS для определения различных стилей для класса buttonна основе свойства primary.

Добавление условного CSS к стилизованным компонентам обеспечивает огромную гибкость в стилизации компонентов React. Мы рассмотрели три метода: использование тернарных операторов, использование библиотек CSS-in-JS и объединение стилевых компонентов с модулями CSS. В зависимости от ваших предпочтений и требований проекта вы можете выбрать наиболее подходящий подход. Поэкспериментируйте с этими методами, чтобы создавать динамичные и отзывчивые пользовательские интерфейсы с помощью стилевых компонентов.