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

Метод 1: базовое оформление
Стилизованные компоненты позволяют определять стили непосредственно внутри компонента с помощью тегированных литералов шаблона. Чтобы передать реквизиты в стилизованные компоненты в TypeScript, вы можете определить интерфейс для реквизитов и использовать его в качестве общего аргумента.

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;
`;
const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

Метод 2: расширение стилей
С помощью стилизованных компонентов вы можете легко расширять существующие стили и создавать варианты ваших компонентов. TypeScript позволяет расширить интерфейс реквизита, включив в него дополнительные свойства.

const SpecialButton = styled(Button)`
  font-weight: bold;
`;
const App = () => {
  return (
    <div>
      <Button>Normal Button</Button>
      <SpecialButton>Special Button</SpecialButton>
    </div>
  );
};

Метод 3: условное оформление
Вы можете использовать проверку типов TypeScript для условного применения стилей на основе реквизитов.

const Button = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: ${(props) => (props.primary ? 'white' : 'black')};
  padding: 10px;
  border-radius: ${(props) => (props.rounded ? '50px' : '0')};
`;
const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button rounded>Rounded Button</Button>
    </div>
  );
};

Метод 4: создание тем
Стилизованные компоненты предоставляют мощный API для создания тем, который можно легко интегрировать с TypeScript. Вы можете определить интерфейс темы, передать его ThemeProvider и получить доступ к свойствам темы внутри ваших стилизованных компонентов.

interface Theme {
  primaryColor: string;
  secondaryColor: string;
}
const theme: Theme = {
  primaryColor: 'blue',
  secondaryColor: 'gray',
};
const Button = styled.button<ButtonProps>`
  background-color: ${(props) => props.theme.primaryColor};
  color: white;
  padding: 10px;
`;
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button primary>Primary Button</Button>
        <Button>Secondary Button</Button>
      </div>
    </ThemeProvider>
  );
};

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