Vuetify JS, Nuxt Как кастомизировать компоненты под свой дизайн?

Question

[dinya17]

Суть вопроса. Можно ли как - то кастомизировать VuetifyJs под дизайн текущего проекта?
Т.е. есть проект и я захотел использовать в нем компонент автокомплита VuetifyJs, как я могу переопределить цвета компонентов VuetifyJs. Про theme я знаю, но это не выход, это просто основные цвета переопределим

Vue.use(Vuetify,{
    theme: {
      primary: '#008136',
      secondary: '#66BB6A',
      accent: '#1B5E20',
      error: '#f44336',
      warning: '#ffeb3b',
      info: '#2196f3',
      success: '#4caf50'
    }
})

Как я могу отдельные элементы кастомизировать? Цвет внутри автокомплита, допустим?

Answer 1

[Anton Veber]

Мне нужно было увеличить размер badge - это конечно костыльное решение, но я вынес css файл из папки node_modules, чтобы его можно было коммитить и вручную переписал значение размера. Это значение я нашел в коде страницы через dev tools.

Comments

[dinya17]

Ну как вариант , да. А если обновился компонент? Необходимо и свой css каждый раз править?
Т.е. я по идее могу свой css завести и в нем переопределить нужные мне стили?

[Anton Veber]

dinya17, заводить свой css-файл я не стал. Я только переписал к нему путь в main.js - я же его перенёс из папки node_modules в src. Ну и да - обновился весь vuetify и я за десять минут поменял новый css и старый путём копипасты и сравнения.