Vuetify 4 incompatibility: component CSS breaks button styling (theme / layers issue)

[stephane303]

After upgrading to Vuetify 4, importing components from @wdns/vuetify-inline-fields breaks the styling of core Vuetify components globally.

For example:

<v-btn color="primary">Test</v-btn>

Expected: blue button (primary color)
Actual: white/grey button (surface color), even with variant="elevated"

Root cause (analysis)

Vuetify 4 introduced a new styling system based on CSS layers.

After importing this package:

base component styles (e.g. .v-btn--variant-*) are applied
but theme/utility styles (like bg-primary) no longer override correctly

This suggests the package:

injects global CSS outside Vuetify’s layer system, or
overrides core Vuetify classes (.v-btn, .v-field, etc.), or
is built against Vuetify 2/3 assumptions
Reproduction

Minimal working setup:

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify()

createApp({
  template: '<v-btn color="primary">Test</v-btn>'
})
.use(vuetify)
.mount('#app')

✅ Button renders correctly (blue)

Now add:
import { VInlineCheckbox, VInlineTextField } from "@wdns/vuetify-inline-fields";

❌ Button becomes white (incorrect styling)

Expected behavior
Components should be fully compatible with Vuetify 4

[webdevnerdstuff]

Thanks for checking in! Currently, the components aren't compatible with Vuetify 4 just yet. I’m right in the middle of a move and wrapping up a few large projects, but bringing everything up to speed with Vuetify 4 is definitely a priority on my roadmap once I’m settled. I'll be sure to post updates here as I make progress!