Интерфейс Kepler.gl построен поверх React-компонентов и тесно связан с визуализационным стеком deck.gl и Mapbox GL. Основной принцип кастомизации заключается не в глубокой модификации логики, а в переопределении CSS-слоёв, управляющих панелями, контролами и всплывающими элементами. При этом структура DOM остаётся достаточно стабильной, что позволяет применять предсказуемые стратегии стилизации.
Kepler.gl использует набор предопределённых классов, разделённых по функциональным областям интерфейса:
Каждый блок реализован как React-компонент с привязанным CSS-модулем. В результате стили могут применяться как через глобальные селекторы, так и через более специфичные переопределения.
Ключевая особенность — отсутствие полной изоляции стилей. Это означает, что глобальные CSS-правила способны влиять на интерфейс без необходимости модификации исходного кода библиотеки.
Самый прямолинейный способ стилизации — подключение собственного CSS-файла после загрузки стандартных стилей Kepler.gl.
.kepler-gl {
font-family: Inter, system-ui, sans-serif;
background-color: #0b0f1a;
}
.kepler-gl__panel {
background-color: rgba(20, 24, 35, 0.95);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}Переопределение выполняется через каскадность CSS. Чем специфичнее селектор, тем выше приоритет изменения.
Важно учитывать, что внутренняя структура классов может меняться между версиями, поэтому устойчивые стили обычно строятся на более стабильных контейнерах уровня приложения.
Корневой элемент Kepler.gl обычно размещается внутри контейнера с фиксированным позиционированием:
#app {
width: 100%;
height: 100vh;
overflow: hidden;
}Слой карты занимает всю доступную область, поэтому любые внешние отступы должны задаваться на уровне родительских контейнеров, а не внутри компонентов Kepler.gl.
Дополнительно часто требуется управление z-index-иерархией:
.kepler-gl {
position: relative;
z-index: 0;
}
.kepler-gl__modal {
z-index: 1000;
}Темизация строится через переопределение переменных и глобальных цветов. Хотя Kepler.gl не всегда использует полноценные CSS variables, цветовая схема может быть изменена через селекторы.
Основные зоны изменения:
Пример тёмной темы:
.kepler-gl {
--panel-bg: #111827;
--accent-color: #3b82f6;
}
.kepler-gl__button {
background-color: var(--panel-bg);
color: #e5e7eb;
}
.kepler-gl__button:hover {
background-color: #1f2937;
}Даже при отсутствии нативной поддержки переменных, такой подход упрощает поддержку единого визуального языка.
Панель слоёв является одной из наиболее насыщенных частей интерфейса. Она содержит вложенные компоненты, что требует каскадной стилизации.
.kepler-gl__layer-panel {
width: 320px;
background: #0f172a;
border-left: 1px solid #1e293b;
}
.kepler-gl__layer-panel-header {
font-weight: 600;
padding: 12px 16px;
}Особое внимание уделяется состояниям элементов:
.kepler-gl__layer-item--active {
background-color: rgba(59, 130, 246, 0.15);
}
.kepler-gl__layer-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}Состояния hover и active формируют основную интерактивность интерфейса без изменения JavaScript-логики.
Popup-элементы в Kepler.gl часто создаются поверх WebGL-контекста Mapbox GL JS, поэтому требуют строгого контроля прозрачности и слоёв.
.kepler-gl__tooltip {
background-color: rgba(17, 24, 39, 0.95);
color: #f9fafb;
border-radius: 6px;
padding: 8px 10px;
font-size: 12px;
backdrop-filter: blur(6px);
}Mapbox GL добавляет собственные контейнеры для popups, поэтому иногда требуется перекрытие стандартных классов Mapbox:
.mapboxgl-popup-content {
background: transparent;
box-shadow: none;
}Такой подход позволяет полностью синхронизировать внешний вид Kepler.gl с картографическим слоем.
Контролы интерфейса формируют основное взаимодействие пользователя с картой. Их стилизация должна учитывать активные, disabled и hover состояния.
.kepler-gl__control-button {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.kepler-gl__control-button:active {
transform: scale(0.96);
}Отклик интерфейса через визуальные состояния играет ключевую роль при работе с плотными аналитическими слоями.
Kepler.gl использует Mapbox GL JS как базовый рендерер карт, поэтому часть визуальных изменений должна выполняться через переопределение Mapbox-стилей.
.mapboxgl-ctrl-group {
background: #0b1220;
border-radius: 8px;
overflow: hidden;
}
.mapboxgl-ctrl button {
filter: brightness(0.9);
}Изменения здесь влияют на стандартные элементы управления масштабом, компасом и навигацией.
Типографика распространяется на весь интерфейс Kepler.gl, поэтому изменение базового font-family является наиболее эффективным способом унификации визуального стиля.
.kepler-gl {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
line-height: 1.4;
}Дополнительно можно выделять заголовки панелей:
.kepler-gl__panel-title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
}Модальные окна являются отдельным уровнем интерфейса, часто перекрывающим карту и панели.
.kepler-gl__modal-overlay {
background-color: rgba(0, 0, 0, 0.6);
}
.kepler-gl__modal {
background-color: #0f172a;
border-radius: 12px;
padding: 20px;
}Контроль overlay-слоя влияет на восприятие глубины интерфейса и визуальную иерархию элементов.
При работе с большими наборами данных интерфейс требует визуального упрощения:
.kepler-gl__legend {
font-size: 11px;
opacity: 0.85;
}
.kepler-gl__filter-item {
padding: 6px 8px;
}Снижение визуального шума позволяет повысить читаемость аналитических элементов без изменения функционала.
Для долгосрочной поддержки интерфейса применяются следующие подходы:
!importantТакая структура позволяет сохранять предсказуемость поведения интерфейса при обновлениях библиотеки и изменениях DOM-структуры.