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

Метод 1: базовое использование
Стилизованные компоненты позволяют вам определять и использовать компоненты с собственным стилем непосредственно в коде React. Вот простой пример:

import styled from 'styled-components';
const Button = styled.button`
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;
const App = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
};

Метод 2: стилизация на основе свойств.
Стилизованные компоненты также поддерживают динамическое оформление на основе свойств компонента. Это особенно полезно, если вы хотите изменить стили в зависимости от различных состояний или условий. Вот пример:

import styled from 'styled-components';
interface ButtonProps {
  primary?: boolean;
}
const Button = styled.button<ButtonProps>`
  background-color: ${(props) => (props.primary ? '#007bff' : '#ccc')};
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;
const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

Метод 3: Темизация
Стилизованные компоненты обеспечивают встроенную поддержку тем, позволяющую создать единый визуальный стиль во всем приложении. Вот пример использования тем:

import styled, { ThemeProvider } from 'styled-components';
interface Theme {
  primaryColor: string;
}
const theme: Theme = {
  primaryColor: '#007bff',
};
const Button = styled.button`
  background-color: ${(props) => props.theme.primaryColor};
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button>Themed Button</Button>
      </div>
    </ThemeProvider>
  );
};

Метод 4: глобальные стили
Стилизованные компоненты позволяют вам определить глобальные стили для вашего приложения. Это полезно для установки стилей по умолчанию или переопределения настроек браузера по умолчанию. Вот пример:

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
  body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
  }
`;
const App = () => {
  return (
    <div>
      <GlobalStyle />
      <h1>Welcome to My App</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

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