Стилизация и переопределение стилей

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

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

:root {
  --cds-button-background: #0f62fe;
  --cds-button-color: #ffffff;
}

Такое определение переменных изменяет фон и цвет текста всех кнопок Carbon в проекте.

Работа с кастомными классами

Каждый компонент поддерживает передачу классов через проп class, что позволяет использовать собственные CSS-правила:

.my-custom-button {
  border-radius: 12px;
  font-weight: bold;
}

Приоритет отдается стилям, заданным через пользовательские классы, при условии корректного использования специфичности CSS.

Переопределение стилей через глобальные селекторы

Для изменения стилей конкретных элементов внутри компонентов применяется подход с глобальными селекторами Svelte:

Важно: использование :global гарантирует, что стили применятся ко всем экземплярам компонентов, даже если они находятся в разных Svelte-компонентах.

Стилизация через слоты

Многие компоненты Carbon предоставляют слоты для вставки собственного содержимого. С помощью слотов можно добавлять кастомные элементы и стилизовать их без изменения исходного компонента:


  Поиск

.custom-label {
  font-style: italic;
  color: #ff4d4d;
}

Слоты позволяют изолировать пользовательские изменения и сохраняют совместимость с будущими обновлениями библиотеки.

Использование SCSS для тонкой настройки

Carbon Components Svelte полностью совместим с SCSS, что открывает возможности для создания тем и миксинов. Например:

@use 'carbon-components/scss/globals/scss/styles.scss' as *;

.my-theme {
  $interactive-01: #0f62fe;
  $field-01: #f3f3f3;

  @include button-variant($interactive-01, $field-01);
}

Такой подход позволяет централизованно менять стили всех компонентов и внедрять кастомные темы.

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

Стили компонентов можно менять динамически через Svelte-реактивность:

Изменение переменной color моментально обновляет стиль кнопки без перезагрузки страницы.

Работа с CSS-переменными Carbon

Carbon использует систему переменных для большинства параметров:

  • --cds-button-background — фон кнопки
  • --cds-button-color — цвет текста
  • --cds-input-border — граница текстового поля

Переменные можно переопределять локально:

В этом случае стиль применяется только к кнопкам внутри контейнера.

Совмещение подходов

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

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

Такой подход обеспечивает масштабируемость, удобство поддержки и совместимость с обновлениями библиотеки Carbon.

Оглавление