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

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

import styled from 'styled-components';
interface ButtonProps {
  primary: boolean;
}
const Button = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
`;
const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button primary={false}>Secondary Button</Button>
    </div>
  );
};

1. Расширение компонентов.
   Обобщенные аргументы типа также можно использовать для расширения существующих стилизованных компонентов с помощью дополнительных свойств. Это позволяет создавать стилизованные варианты компонентов без дублирования кода. Вот пример:

import styled from 'styled-components';
interface ButtonProps {
  primary: boolean;
}
const BaseButton = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
`;
interface SecondaryButtonProps extends ButtonProps {
  danger: boolean;
}
const SecondaryButton = styled(BaseButton)<SecondaryButtonProps>`
  background-color: ${(props) => (props.danger ? 'red' : 'gray')};
`;
const App = () => {
  return (
    <div>
      <BaseButton primary>Primary Button</BaseButton>
      <SecondaryButton primary danger>
        Secondary Button
      </SecondaryButton>
    </div>
  );
};

1. Динамическое оформление.
   Обобщенные аргументы типа позволяют применять динамическое оформление на основе реквизитов. Вот пример, в котором мы условно стилизуем компонент на основе свойства:

import styled from 'styled-components';
interface HeadingProps {
  fontSize: string;
}
const Heading = styled.h1<HeadingProps>`
  font-size: ${(props) => props.fontSize};
`;
const App = () => {
  return (
    <div>
      <Heading fontSize="24px">Large Heading</Heading>
      <Heading fontSize="16px">Small Heading</Heading>
    </div>
  );
};

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