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

Element Plus предоставляет гибкую систему кастомизации внешнего вида компонентов через CSS-классы. Каждый компонент имеет предопределённые классы, которые можно переопределять или дополнять для создания уникального интерфейса.

Структура CSS-классов в Element Plus

У большинства компонентов Element Plus есть два уровня классов:

  1. Базовые классы — обеспечивают основную структуру компонента. Например, кнопка <el-button> имеет класс .el-button.
  2. Модификаторы состояния — добавляются для изменения внешнего вида в зависимости от состояния компонента: активный, выделенный, заблокированный. Например, .is-disabled для неактивной кнопки.

Пример для кнопки:

<el-button class="custom-button" type="primary" :disabled="true">Кнопка</el-button>
.custom-button {
  border-radius: 8px;
  font-weight: bold;
  background-color: #42b983;
}

.custom-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Использование глобальных и локальных классов

  • Глобальные классы применяются ко всем компонентам определённого типа. Например, можно переопределить все кнопки .el-button:
.el-button {
  font-size: 16px;
  padding: 10px 20px;
}
  • Локальные классы назначаются через атрибут class конкретному компоненту, что позволяет индивидуализировать стиль:
<el-input class="custom-input" placeholder="Введите текст"></el-input>
.custom-input {
  border: 2px solid #42b983;
  border-radius: 6px;
}

Темизация через CSS-переменные

Element Plus активно использует CSS-переменные, которые задают цветовую палитру, размеры, тени и другие свойства компонентов. Переменные можно переопределять в корневом селекторе :root или внутри темы:

:root {
  --el-color-primary: #409eff;
  --el-border-radius-base: 10px;
}

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

Комбинирование классов и псевдоклассов

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

.custom-button:hover {
  background-color: #66b1ff;
}

.custom-button:active {
  transform: scale(0.98);
}

Приоритет классов и специфичность

  • Inline-стили имеют наивысший приоритет.
  • Классы компонентов Element Plus (.el-...) имеют средний приоритет.
  • Пользовательские классы, добавленные через class, могут переопределять базовые стили при условии достаточной специфичности.
/* Сработает только если специфичность выше */
.el-button.custom-button {
  background-color: #f56c6c;
}

Стилизация внутренних элементов компонента

Некоторые компоненты, такие как <el-select> или <el-date-picker>, имеют сложную структуру с дочерними элементами. Для точечной стилизации используется вложенный CSS:

.custom-select .el-input__inner {
  border-color: #ff9900;
}

.custom-select .el-input__inner:focus {
  box-shadow: 0 0 5px #ff9900;
}

Миксины и утилиты для стилизации

Element Plus предоставляет встроенные CSS-утилиты, которые ускоряют стилизацию:

  • .is-active — для активных элементов
  • .is-loading — для состояния загрузки
  • .is-disabled — для блокировки

Применение утилит упрощает взаимодействие с компонентами без глубокого изменения их CSS.

Адаптивная стилизация

Для адаптивного дизайна можно комбинировать классы с медиа-запросами:

@media (max-width: 768px) {
  .custom-button {
    width: 100%;
    font-size: 14px;
  }
}

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

Можно создать собственный набор классов, имитирующий тему:

.theme-dark .el-button {
  background-color: #1f2d3d;
  color: #ffffff;
  border-color: #1f2d3d;
}

.theme-dark .el-button:hover {
  background-color: #2c3e50;
}

Подключение класса theme-dark на корневой элемент переключает все компоненты на тёмную тему без изменения исходных компонентов.

Практические рекомендации

  • Использовать локальные классы для индивидуальных изменений.
  • Использовать CSS-переменные для единообразного контроля цветов и размеров.
  • Стараться не ломать базовые классы Element Plus, чтобы не нарушать поведение компонента.
  • Применять псевдоклассы и медиа-запросы для интерактивных и адаптивных изменений.
  • Документировать кастомные классы для удобства поддержки проекта.

Соблюдение этих принципов обеспечивает чистый, поддерживаемый и расширяемый стиль интерфейса при работе с библиотекой Element Plus.

Оглавление