GlobalStyle

В библиотеке Naive UI объект GlobalStyle отвечает за настройку глобальных стилей интерфейса, обеспечивая единый визуальный язык для всех компонентов. Он позволяет задавать типографику, отступы, цвета, размеры и другие параметры, которые будут применяться по умолчанию ко всем элементам.

Создание и подключение GlobalStyle

Для использования глобальных стилей создается объект через функцию createGlobalStyle или непосредственно в объекте configProvider:

import { createGlobalStyle, NConfigProvider } from 'naive-ui';

const globalStyle = createGlobalStyle({
  body: {
    fontFamily: 'Roboto, sans-serif',
    fontSize: '16px',
    lineHeight: '1.5',
    color: '#333',
    backgroundColor: '#f5f5f5'
  },
  a: {
    color: '#42b983',
    textDecoration: 'none'
  },
  h1: {
    fontSize: '2rem',
    fontWeight: '700'
  }
});

export default globalStyle;

После создания глобальные стили подключаются к корню приложения через NConfigProvider:

import { createApp } from 'vue';
import App from './App.vue';
import { NConfigProvider } from 'naive-ui';
import globalStyle from './globalStyle';

const app = createApp(App);

app.use(NConfigProvider, {
  themeOverrides: {},
  globalStyle
});

app.mount('#app');

Основные возможности GlobalStyle

  1. Типографика

    • Можно задавать шрифты для всего приложения.

    • Поддерживаются CSS-свойства: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing.

    • Пример:

      const globalStyle = createGlobalStyle({
  body: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '14px',
    lineHeight: '1.6'
  }
});

  2. Цвета и фон

    • Общие цвета текста, ссылок и фона.

    • С помощью глобальных переменных можно поддерживать светлую и темную тему.

    • Пример:

      body: {
  color: '#212121',
  backgroundColor: '#fafafa'
},
a: {
  color: '#1e88e5'
}

  3. Сброс стилей (Reset)

    • Удобно для унификации внешнего вида разных браузеров.

    • Можно задать margin, padding и box-sizing для всех элементов.

    • Пример:

      '*': {
  margin: 0,
  padding: 0,
  boxSizing: 'border-box'
}

  4. Темизация компонентов

    • GlobalStyle можно использовать для задания базовой темы всех компонентов Naive UI.
    • Параметры, такие как primaryColor, successColor, warningColor, могут быть глобально переопределены.

Продвинутое использование

Динамическая смена тем

GlobalStyle поддерживает динамическое обновление через реактивные данные Vue:

import { reactive, watch } from 'vue';
import { createGlobalStyle } from 'naive-ui';

const theme = reactive({
  darkMode: false
});

const globalStyle = createGlobalStyle({
  body: {
    backgroundColor: theme.darkMode ? '#121212' : '#ffffff',
    color: theme.darkMode ? '#e0e0e0' : '#212121'
  }
});

watch(() => theme.darkMode, (newValue) => {
  globalStyle.update(); // обновление стилей при смене темы
});

Комбинирование с CSS-переменными

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

const globalStyle = createGlobalStyle({
  ':root': {
    '--primary-color': '#42b983',
    '--font-size-base': '16px'
  },
  body: {
    fontSize: 'var(--font-size-base)',
    color: 'var(--primary-color)'
  }
});

Интеграция с SCSS или PostCSS

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

Лучшие практики

  • Единый источник правды: все глобальные стили лучше хранить в одном файле globalStyle.js для удобного управления.
  • Минимизация дублирования: использовать CSS-переменные для цветов, шрифтов и отступов.
  • Тема и режимы: сразу продумывать светлую и темную тему, чтобы переключение было прозрачным для всех компонентов.
  • Реактивность: при необходимости динамического изменения интерфейса связывать GlobalStyle с реактивными данными Vue.

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

Оглавление