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

Основы стилизации компонентов

Naive UI предоставляет богатый набор компонентов, каждый из которых имеет встроенные темы и переменные CSS, что позволяет гибко управлять внешним видом без необходимости переписывать компоненты. Основной подход к переопределению стилей в Naive UI заключается в использовании следующих инструментов:

  1. Проп style и class — стандартные способы Vue для добавления inline-стилей или классов к компоненту.
  2. Проп theme-overrides — специфичный для Naive UI механизм для изменения переменных темы на уровне отдельного компонента.
  3. Глобальные темы (global-theme-overrides) — позволяют переопределять стили на уровне всего приложения.

Использование theme-overrides

Каждый компонент Naive UI поддерживает объект theme-overrides, который может включать:

  • Цвета фона (color, background-color)
  • Цвет текста (text-color, label-color)
  • Отступы и размеры (padding, margin, border-radius)
  • Тени и рамки (box-shadow, border)

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

<template>
  <n-button :theme-overrides="buttonTheme">Click me</n-button>
</template>

<script setup>
const buttonTheme = {
  common: {
    primaryColor: '#1E90FF',
    primaryColorHover: '#1C86EE',
    borderRadius: '8px'
  },
  Button: {
    textColor: '#FFFFFF',
    fontWeight: '600'
  }
};
</script>

В этом примере изменяется основной цвет кнопки, цвет текста и скругление углов, не трогая остальную логику компонента.

Глобальные переопределения через global-theme-overrides

Если требуется унифицировать стили для всех компонентов приложения, используется объект global-theme-overrides, который передаётся через n-config-provider:

<template>
  <n-config-provider :global-theme-overrides="globalTheme">
    <App />
  </n-config-provider>
</template>

<script setup>
const globalTheme = {
  common: {
    primaryColor: '#FF6347',
    fontFamily: 'Inter, sans-serif'
  },
  Button: {
    borderRadius: '12px'
  },
  Input: {
    borderColor: '#FF6347',
    hoverBorderColor: '#FF4500'
  }
};
</script>

Такой подход обеспечивает консистентный внешний вид всех компонентов без необходимости изменять каждый отдельно.

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

Naive UI активно использует CSS-переменные для своих тем. Каждая переменная имеет префикс --n- и доступна для переопределения в стилях:

:root {
  --n-primary-color: #32CD32;
  --n-border-radius: 10px;
}

.n-button {
  background-color: var(--n-primary-color);
  border-radius: var(--n-border-radius);
}

Это позволяет совмещать мощь стандартного CSS с возможностями Naive UI.

Переопределение стилей конкретных состояний

Компоненты часто имеют состояния: hover, active, disabled. Для каждого состояния можно задать отдельные значения в theme-overrides:

const buttonTheme = {
  Button: {
    color: '#FFFFFF',
    colorHover: '#F0F0F0',
    colorPressed: '#DCDCDC',
    colorDisabled: '#A9A9A9'
  }
};

Важно помнить, что Naive UI учитывает приоритеты: локальные theme-overrides перекрывают глобальные, а inline style перекрывает оба.

Использование style и class для локальных изменений

Для мелких корректировок можно использовать обычные Vue-механизмы:

<n-button class="custom-btn" style="font-size: 18px;">Click</n-button>

<style>
.custom-btn {
  padding: 12px 24px;
  border-radius: 16px;
}
</style>

Этот способ полезен, когда изменения не зависят от темы и нужны только для конкретного экземпляра компонента.

Сочетание подходов

Часто оптимальным является комбинированное использование:

  1. global-theme-overrides для общей стилистики приложения.
  2. theme-overrides для переопределения отдельных компонентов.
  3. CSS-переменные и классы для локальных, точечных правок.

Пример комплексного подхода для формы с кнопкой:

<n-config-provider :global-theme-overrides="globalTheme">
  <n-form :theme-overrides="formTheme">
    <n-form-item label="Username">
      <n-input placeholder="Enter username" />
    </n-form-item>
    <n-button :theme-overrides="buttonTheme">Submit</n-button>
  </n-form>
</n-config-provider>

Такой подход обеспечивает гибкость и консистентность одновременно.

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

  • Для поддержки динамических тем используйте реактивные объекты Vue (ref или reactive) при задании theme-overrides.
  • Для сложных приложений предпочтительно держать глобальные стили в отдельном файле, чтобы обеспечить единообразие.
  • Если требуется переопределить только один цвет или размер, лучше использовать CSS-переменные, чтобы минимизировать конфликт с внутренними стилями компонента.

С этим подходом Naive UI позволяет создавать полностью кастомизированные интерфейсы, сохраняя при этом преимущества готовых компонентов и стандартной темизации.

Оглавление