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

Метод 1: встроенный медиа-запрос

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'green'};
  color: white;

  @media (max-width: 768px) {
    background-color: ${props => props.primary ? 'lightblue' : 'lightgreen'};
  }
`;

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

Метод 2: создание стилизованной оболочки компонента

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'green'};
  color: white;
`;
const ResponsiveButton = styled(Button)`
  @media (max-width: 768px) {
    background-color: ${props => props.primary ? 'lightblue' : 'lightgreen'};
  }
`;

Здесь мы создаем новый компонент со стилем (ResponsiveButton), который оборачивает исходный компонент (Button) и применяет дополнительные стили в медиа-запросе.

Метод 3. Использование вспомогательных функций CSS

import styled, { css } from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'green'};
  color: white;
  ${props => props.responsive && css`
    @media (max-width: 768px) {
      background-color: ${props.primary ? 'lightblue' : 'lightgreen'};
    }
  `}
`;

В этом методе мы используем вспомогательные функции CSS из стилевых компонентов (css) для условного применения стилей в медиазапросе.

Метод 4: динамическое оформление с помощью реквизита

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'green'};
  color: white;
  @media (max-width: 768px) {
    background-color: ${props => props.responsive && (props.primary ? 'lightblue' : 'lightgreen')};
  }
`;

Здесь мы используем props, переданный компоненту, для условного применения стилей в медиа-запросе на основе определенного свойства (в данном случае responsive).

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