Переопределение стилей компонентов

Carbon Components Svelte предоставляет гибкий набор компонентов, разработанных в соответствии с принципами IBM Carbon Design System, позволяя создавать интерфейсы с унифицированным стилем. Одной из ключевых возможностей является настройка внешнего вида компонентов через переопределение стилей, что позволяет адаптировать стандартные компоненты под индивидуальные требования проекта.

1. Использование CSS-переменных

Большинство компонентов Carbon основаны на CSS-переменных, что обеспечивает возможность переопределять цвета, отступы, размеры шрифтов и другие свойства без изменения исходного кода библиотеки.

Пример: изменение цвета кнопки

<style>
  :global(:root) {
    --cds-button-primary-background-color: #0072c3;
    --cds-button-primary-hover-background-color: #005ea2;
  }
</style>

<Button kind="primary">Новая кнопка</Button>

Ключевые моменты:

  • :global(:root) обеспечивает глобальное переопределение переменных.
  • Все стандартные состояния (hover, active, disabled) могут быть изменены с помощью соответствующих CSS-переменных.

2. Локальное переопределение стилей компонентов

Иногда необходимо изменить стиль только для конкретного экземпляра компонента. В Svelte это можно сделать через применение классов и class-пропс:

<style>
  .custom-button {
    background-color: #ff5722;
    color: #ffffff;
    border-radius: 8px;
  }
</style>

<Button class="custom-button">Локальная кнопка</Button>

Особенности:

  • Локальные стили применяются только к компоненту с указанным классом.
  • Можно комбинировать стандартные CSS-переменные с локальными стилями для точной настройки.

3. Переопределение стилей через style пропс

Svelte-компоненты Carbon принимают пропс style, позволяющий напрямую передавать CSS-свойства:

<Button style="padding: 1.2rem 2rem; font-weight: bold;">Кнопка с inline стилем</Button>

Преимущества и ограничения:

  • Быстрое переопределение конкретных свойств.
  • Подходит для одноразовых изменений.
  • Менее гибкий способ для глобальной стилизации и не поддерживает переопределение переменных состояния (hover, focus).

4. Темизация через SCSS

Для проектов, использующих препроцессоры, Carbon Components Svelte предоставляет возможность кастомизации через SCSS-файлы. Например, можно изменить тему, импортировав переменные SCSS и переопределив их до подключения стилей компонентов:

// variables.scss
$interactive-01: #0f62fe;
$interactive-01-hover: #0353e9;

// main.scss
@import 'variables.scss';
@import 'carbon-components-svelte/css/all.css';

Особенности:

  • Позволяет создавать собственные темы для всего приложения.
  • Сохраняется совместимость с состояниями компонентов (hover, focus, disabled).
  • Требует сборки SCSS через сборщик (Vite, Webpack, Rollup).

5. Комбинирование переопределений

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

  1. Глобальные переменные CSS — для базовой цветовой и типографической схемы.
  2. SCSS-переменные — для создания единой темы на уровне проекта.
  3. Классы и style пропсы — для точечных изменений отдельных компонентов.

Пример:

<style>
  :global(:root) {
    --cds-button-secondary-background-color: #e0e0e0;
    --cds-button-secondary-hover-background-color: #c6c6c6;
  }

  .special-button {
    border: 2px solid #ff5722;
    color: #ff5722;
  }
</style>

<Button kind="secondary" class="special-button">Комбинированная кнопка</Button>

6. Использование слотов и оберток

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

<style>
  .custom-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
</style>

<Card class="custom-card">
  <h3 slot="heading">Заголовок карточки</h3>
  <p slot="content">Содержимое карточки</p>
</Card>

Особенности:

  • Позволяет менять визуальное оформление вложенных элементов.
  • Сохраняется функциональность компонентов Carbon (кнопки, формы внутри карточки остаются интерактивными).

7. Динамическая стилизация через Svelte

В Svelte доступна реактивная привязка стилей, что удобно для динамических интерфейсов:

<script>
  let buttonColor = '#0f62fe';
</script>

<Button style="background-color: {buttonColor}; color: white;">
  Динамическая кнопка
</Button>

<input type="color" bind:value={buttonColor}>

Ключевые моменты:

  • Позволяет изменять стили компонентов на лету.
  • Подходит для интерактивных UI (темы, пользовательские настройки).

Переопределение стилей компонентов в Carbon Components Svelte объединяет возможности глобальных CSS-переменных, SCSS-темизации, локальных классов и реактивной динамической стилизации. Такой подход позволяет создавать визуально консистентные интерфейсы с гибкой адаптацией под требования конкретного проекта.

Оглавление