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

Метод 1: использование условных операторов

import styled from 'styled-components';
const StyledComponent = styled.div`
  color: ${props => {
    if (props.variant === 'primary') return 'blue';
    if (props.variant === 'secondary') return 'red';
    return 'black';
  }};
`;

Метод 2: использование тернарного оператора

import styled from 'styled-components';
const StyledComponent = styled.div`
  color: ${props => (props.variant === 'primary' ? 'blue' : props.variant === 'secondary' ? 'red' : 'black')};
`;

Метод 3. Использование сопоставления объектов

import styled from 'styled-components';
const colorMap = {
  primary: 'blue',
  secondary: 'red',
};
const StyledComponent = styled.div`
  color: ${props => colorMap[props.variant] || 'black'};
`;

Метод 4. Использование сопоставления функций

import styled from 'styled-components';
const getColor = variant => {
  switch (variant) {
    case 'primary':
      return 'blue';
    case 'secondary':
      return 'red';
    default:
      return 'black';
  }
};
const StyledComponent = styled.div`
  color: ${props => getColor(props.variant)};
`;

Метод 5. Использование переменных CSS

import styled, { css } from 'styled-components';
const primaryStyles = css`
  color: blue;
`;
const secondaryStyles = css`
  color: red;
`;
const defaultStyles = css`
  color: black;
`;
const StyledComponent = styled.div`
  ${({ variant }) => (variant === 'primary' ? primaryStyles : variant === 'secondary' ? secondaryStyles : defaultStyles)}
`;

Метод 6: использование миксинов

import styled, { css } from 'styled-components';
const variantMixin = css`
  ${({ variant }) => {
    switch (variant) {
      case 'primary':
        return 'color: blue;';
      case 'secondary':
        return 'color: red;';
      default:
        return 'color: black;';
    }
  }}
`;
const StyledComponent = styled.div`
  ${variantMixin}
`;

Метод 7: использование библиотек CSS-in-JS со встроенной поддержкой регистра переключения
Некоторые библиотеки CSS-in-JS, такие как Emotion и Styletron, предлагают встроенную поддержку функциональности переключения регистра, которая может еще больше упростить реализацию. Дополнительную информацию можно найти в документации соответствующей библиотеки.

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