Как обратиться к элементам компонента библиотеки Vant, чтобы можно было выборочно применить кастомные стили к элементам?

Рейтинг: 0Ответов: 1Опубликовано: 22.05.2023

Есть календарь библиотеки Vant. В нем по дефолту отмечены диапазоны дат. На данный момент они выделяются одним цветом в независимости. Но я хочу изменять цвет этих отмеченных периодов разными цветами относительно today даты. Если мы работаем с чистым JS, то просто можно обратиться через document.querySelectorAll или другим удобным способом. На данный момент начала изучать Vue фреймворк и не могу понять, каким образом мы можем обратиться напрямую к DOM элементу в нем?

Правка №1

При более тщательном изучении библиотеки Vant обнаружила функцию formatter, которая позволяет обратиться к каждому из дней в зависимости от необходимого условия и изменить или добавить, например, класс. Я использую для этого дополнительно tailwindcss, чтобы не добавлять какие-либо стили "от себя". Однако базовые стили vant перебивают стили tailwind. Каким образом можно назначить им большую приоритетность?

javascript vue.js vue3
Источник: Stack Overflow на русском

Ответы

▲ 0

Приняла для себя решение не использовать для этого tailwind, а просто добавлять кастомные стили, но всего лишь переназначить там значения css переменных. Я не нашла в документации перечень всех переменных css (возможно просто не заметила). Но их можно просто найти через devtools в разделе стилей и указать необходимые цвета. Да и в целом при необходимости изменить стилизацию.