Стилизованные компоненты

Стилизованные компоненты в Inferno позволяют объединить логику отображения и оформление в едином модуле, обеспечивая высокую читаемость и поддерживаемость кода. Подход основан на концепции CSS-in-JS, когда стили описываются непосредственно в JavaScript и привязываются к конкретным компонентам.

Создание базового стилизованного компонента

В Inferno для создания стилизованных компонентов обычно используют библиотеки, совместимые с JSX, например styled-components или собственные решения на основе функций. Простейший пример выглядит так:

import { Component } from 'inferno';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;

  &:hover {
    background-color: #0056b3;
  }
`;

class App extends Component {
  render() {
    return <Button>Нажми меня</Button>;
  }
}

В этом примере создаётся компонент Button, который содержит свои стили, полностью изолированные от глобального CSS.

Принципы изоляции стилей

  • Локальность: каждый стилизованный компонент получает уникальные классы, предотвращая конфликты имен.
  • Синтаксис CSS в JS: стили описываются в виде шаблонных литералов, что позволяет использовать интерполяцию переменных и функций.
  • Наследование стилей: можно расширять существующие компоненты, добавляя новые свойства.
const PrimaryButton = styled(Button)`
  background-color: #28a745;

  &:hover {
    background-color: #218838;
  }
`;

Динамическое изменение стилей

Стилизованные компоненты в Inferno поддерживают динамические свойства, что делает возможным изменение стилей через пропсы:

const Alert = styled.div`
  padding: 1rem;
  border-radius: 4px;
  color: white;
  background-color: ${props => props.type === 'error' ? '#dc3545' : '#17a2b8'};
`;

<Alert type="error">Ошибка загрузки данных</Alert>
<Alert type="info">Информация успешно обновлена</Alert>

Использование функций для стилей

Для сложных сценариев можно определять функции, возвращающие стили на основе пропсов или состояния компонента:

const Card = styled.div(props => ({
  padding: '1rem',
  borderRadius: '8px',
  backgroundColor: props.highlight ? '#ffc107' : '#f8f9fa',
  boxShadow: props.highlight ? '0 4px 8px rgba(0,0,0,0.2)' : 'none'
}));

<Card highlight={true}>Важная карточка</Card>
<Card highlight={false}>Обычная карточка</Card>

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

Интеграция с темами

Стилизованные компоненты позволяют создавать тематические обёртки, где стили зависят от текущей темы:

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d'
  }
};

const ThemedButton = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: white;
  padding: 0.5rem 1rem;
`;

<ThemeProvider theme={theme}>
  <ThemedButton>Тематическая кнопка</ThemedButton>
</ThemeProvider>

Такой подход обеспечивает централизованное управление стилями всего приложения, что особенно полезно для крупных проектов.

Комбинирование с классическими компонентами Inferno

Стилизованные компоненты можно комбинировать с обычными классами и функциональными компонентами:

const Wrapper = styled.div`
  display: flex;
  gap: 1rem;
`;

const Item = ({ children }) => <Wrapper>{children}</Wrapper>;

<Item>
  <Button>Кнопка 1</Button>
  <PrimaryButton>Кнопка 2</PrimaryButton>
</Item>

Это позволяет постепенно внедрять CSS-in-JS, не переписывая полностью существующие компоненты.

Преимущества стилизованных компонентов в Inferno

  • Изоляция и предсказуемость: каждая единица стилей привязана к компоненту.
  • Динамика: пропсы и состояние могут влиять на визуализацию.
  • Повторное использование: легко создавать расширяемые компоненты.
  • Поддержка темизации: глобальные стили можно централизованно менять через контекст.

Практические советы

  1. Разделять визуальные и логические компоненты только в случаях сложного состояния.
  2. Использовать функции для динамических стилей, чтобы избежать дублирования CSS.
  3. Применять ThemeProvider для единообразного оформления больших приложений.
  4. Следить за производительностью при большом количестве динамически генерируемых стилей — использовать мемоизацию при необходимости.

Стилизованные компоненты в Inferno объединяют гибкость JSX и мощь CSS, создавая чистый и модульный подход к разработке пользовательского интерфейса.

Оглавление