How to override vuetify visual component styles?

Question

css

When implementing nuxt.js into my project, I encountered such a problem that in some places the layout of the project began to behave inappropriately. Many points fixed, but one unresolved problem remained. Vuetify has a v-snackbar component and it pops up when the button is clicked. There is text in the block and it crawls out of the block boundaries. Previously, the height adjusted to the content by adding an auto-height attribute to the component, but now everything is different. I tried to fix it by setting the class to the component and experimenting in every possible way, but all without the original. I went into node_modules and then into vuetify.css and saw that it had a fixed height. Can it be redefined somehow? Or are there other ways to solve the problem?

Answer 1

I solved the problem by adding a global styles file main.styl, importing vuetify styles into it. In it, I redefined the height of the component style to auto.