Чтобы добавить условный CSS к стилизованным компонентам, у вас есть несколько вариантов. Вот несколько популярных методов:

1. Использование тернарного оператора. Вы можете использовать тернарный оператор внутри литерала шаблона, чтобы условно применять стили CSS на основе условия. Вот пример:

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

В этом примере для свойства background-colorустановлено синее значение, если свойство primaryистинно, и зеленое в противном случае.

2. Использование вспомогательной функции css. Пакет styled-commentsпредоставляет вспомогательную функцию css, которая позволяет определять повторно используемые фрагменты CSS. Затем вы можете условно применить эти фрагменты, используя свойство css. Вот пример:

import styled, { css } from 'styled-components';
const primaryStyles = css`
  background-color: blue;
  color: white;
`;
const secondaryStyles = css`
  background-color: green;
  color: white;
`;
const Button = styled.button`
  ${props => props.primary ? primaryStyles : secondaryStyles}
  padding: 10px 20px;
`;

В этом примере компонент Buttonусловно применяет primaryStylesили вторичныйStylesна основе значения primary. >опора.

3. Использование метода attrs. Пакет styled-commentsпредоставляет метод attrs, который позволяет устанавливать атрибуты на основе свойств компонента. Вы можете использовать этот метод для условной установки свойств CSS. Вот пример:

import styled from 'styled-components';
const Button = styled.button.attrs(props => ({
  style: {
    backgroundColor: props.primary ? 'blue' : 'green',
    color: 'white',
  },
}))`
  padding: 10px 20px;
`;

В этом примере свойство backgroundColorустанавливается условно на основе значения свойства primary.

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