Vuetify как правильно переопределять стили?

Question

[kristine-bladvin]

Делаю инпут поиска на базе v-text-field, пытаюсь интегрировать в этот инпут select для выбора v-select использую v-slot:prepend.

Но при всех вариантах абсолютно не могу переопределить стили компонентов vuetify. Мне нужно убрать рамки у инпута и сделать общую рамку у этих двух компонентов.

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

Answer 1

[kristine-bladvin]

Это тебе мой единственный подпищик.
Работая с vuetify можно определить стиль и компонент тремя способами:

1. Используя атрибуты vuetify компонента, такие как border в ноль. Не всегда но бывает получается добиться нужного визуала.
   
2. Использовать встроенные css классы такие ma-0 pa-0, которые выставляют padding и margin 0. Есть практически для всех стилей
   
3. Ловить класс в стилях :deep .vuetify-class-name
   
4. Переопределять шаблон vuetify компонента используя v-slot
   

Answer 2

[Евгений Механиков]

Вот документация с официального сайта https://vuetifyjs.com/en/features/sass-variables/
там все написано как делать кастомные стили