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

1. Базовое оформление стилей.
   Стилизованные компоненты позволяют создавать многократно используемые и компонуемые компоненты с помощью стилизованных тегов. Вот простой пример:

import styled from 'styled-components';
const Button = styled.button`
  background-color: #ff7f50;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;
// Usage
<Button>Click me!</Button>

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

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${({ primary }) => (primary ? '#ff7f50' : '#ccc')};
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;
// Usage
<Button primary>Primary Button</Button>
<Button>Secondary Button</Button>

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

import styled from 'styled-components';
const Button = styled.button`
  background-color: #ff7f50;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;
const DangerButton = styled(Button)`
  background-color: #ff4136;
`;
// Usage
<Button>Normal Button</Button>
<DangerButton>Danger Button</DangerButton>

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

import styled, { ThemeProvider } from 'styled-components';
const theme = {
  colors: {
    primary: '#ff7f50',
    secondary: '#6b8e23',
  },
};
const Button = styled.button`
  background-color: ${({ theme }) => theme.colors.primary};
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;
// Usage
<ThemeProvider theme={theme}>
  <Button>Themed Button</Button>
</ThemeProvider>

Стилизованные компоненты в сочетании с Twin.macro предоставляют отличный набор инструментов для создания надежных и удобных в обслуживании стилей в ваших приложениях React. Мы лишь поверхностно коснулись того, на что способны эти библиотеки, но, надеюсь, эта статья дала вам почувствовать их мощь. Так что вперед, экспериментируйте и повышайте уровень своего стиля!