CSS Modules

CSS Modules — это подход к стилизации компонентов, позволяющий создавать локальные CSS-классы, уникальные для каждого компонента, что предотвращает конфликты имен. В экосистеме Naive UI это особенно важно, так как библиотека предоставляет большое количество готовых UI-компонентов, а локальная стилизация позволяет изменять их внешний вид без риска затереть глобальные стили.

Подключение CSS Modules

Для работы с CSS Modules достаточно переименовать файл стилей с расширением .module.css или .module.scss (если используется Sass). Пример:

import styles from './Button.module.css';
import { NButton } from 'naive-ui';

export default {
  setup() {
    return () => (
      <NButton class={styles.customButton}>Нажми меня</NButton>
    )
  }
}

В этом примере styles.customButton автоматически преобразуется в уникальный класс, например Button_customButton__abc123, что гарантирует отсутствие конфликтов с другими стилями на странице.

Структура CSS Modules

CSS Modules поддерживает стандартные возможности CSS, включая селекторы, псевдоклассы и медиа-запросы. Например:

/* Button.module.css */
.customButton {
  background-color: #42b983;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.customButton:hover {
  background-color: #369870;
}

@media (max-width: 768px) {
  .customButton {
    width: 100%;
    padding: 12px 0;
  }
}

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

Динамические классы и композиция

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

import styles from './Button.module.css';
import { NButton } from 'naive-ui';
import { computed } from 'vue';

export default {
  props: {
    primary: Boolean
  },
  setup(props) {
    const buttonClass = computed(() => [
      styles.customButton,
      props.primary ? styles.primary : ''
    ]);

    return () => <NButton class={buttonClass.value}>Кнопка</NButton>;
  }
}

Здесь buttonClass будет автоматически объединять нужные CSS-классы в зависимости от состояния компонента.

Работа с вложенными компонентами Naive UI

Некоторые компоненты Naive UI состоят из нескольких внутренних элементов. Для их стилизации через CSS Modules используется специальный селектор ::v-deep (в Vue 3) или :deep() в <style module>:

/* Modal.module.css */
.modalContent :deep(.n-modal-body) {
  padding: 24px;
  background-color: #f5f5f5;
}

Это позволяет изменять внутренние части компонентов Naive UI, не ломая структуру и сохраняя локальность стилей.

Использование SCSS с CSS Modules

При использовании SCSS можно добавлять вложенность, переменные и миксины, сохраняя все преимущества CSS Modules:

/* Card.module.scss */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .cardHeader {
    font-weight: 600;
    padding: 12px;
  }

  .cardBody {
    padding: 16px;
    font-size: 14px;
  }
}

Подключение:

import styles from './Card.module.scss';
import { NCard } from 'naive-ui';

export default {
  setup() {
    return () => (
      <NCard class={styles.card}>
        <div class={styles.cardHeader}>Заголовок</div>
        <div class={styles.cardBody}>Содержимое карточки</div>
      </NCard>
    )
  }
}

Преимущества использования CSS Modules с Naive UI

  1. Локальные стили — уникальные имена классов предотвращают конфликты.
  2. Совместимость с SCSS — поддержка вложенности, переменных, миксинов.
  3. Гибкая динамическая стилизация — возможность менять классы на лету через computed свойства.
  4. Управление внутренними элементами Naive UI — через ::v-deep можно безопасно стилизовать внутренние части компонентов.

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

Оглавление