Vuetify: [Feature Request] add prefix to util style classes

[daskyrk]

Problem to solve

If implement the vuetify to an existing project, it's easy to break the original style for vuetify have a set of util style classes, like container, layout or success etc. And it also apply some style to default element like padding in ul > li, which could affect the existing style.

see this problem: https://stackoverflow.com/questions/54293336/how-to-avoid-vuetify-overrides-default-css

Proposed solution

Maybe add a prefix to these util classes and not apply style to default element?

[johnleider]

I can see this happening for grid but not utilities.

[daskyrk]

in the cdn file: https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css, you can format the file with chrome devtool, and there is some style applied to normal element like this:

and some other style starts from line 2734

By the way, class like 'container' is too normal so it's easy to conflict with exist style in project (:

[ipluser]

@johnleider

I develop a Google Extension using Vuetify in content script, but it will overwrite the style of the original content page, then I append namespace class name for vuetify css, like below code:

.custom-container {
  @import 'vuetify.min';
}

Next, I try to reduce the bundle size using A-la-carte, like this:

import Vuetify, {
  VApp,
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
} from 'vuetify/lib'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  },
  // ...
})

But, It will inject the component style into content page using <style></style> tag, you know it will overwrite the original page~

I think the webpack will resolve it, but it need to do some work.

I just want to append prefix class name for all vuetify style, do you have some better solution? Thx~

[KaelWD]

@ipluser https://github.com/vuetifyjs/vuetify/issues/3706

[Dinver]

The problem is relevant. In the transition from 1.5 to 2.2. In Vuetify there should be no global styles. Styles should apply only to Vuetify components.

Same with links:

[josvos]

Just started evaluating Vuetify to see if I can / want to use it in my project and this is the first issue I came across in the first hour: the conflict with my existing container class, adding unwanted padding. It would be great if these generic classes can be renamed with a v- prefix.

[kosmall]

is any workaround for this moment?

[garbinmarcelo]

Facing the same problem with a project made with tailwindcss.

Any news about this option to add prefix in Vuetify?