Using with Vuetify

[mcasto]

I encountered an interesting situation (at least to me).

If I set up vue-chessboard on a page running vuetify (e.g.: inside the v-app tag), the css/graphics don't play nicely.

I realize I could pull that page out of the vuetify framework and run it as a vanilla vue page, but I wonder if it's possible to resolve it within the vuetify framework.

Any ideas?

[mcasto]

With a little further exploration in DevTools, I was able to fix this by turning off background-color of the ".v-application .white" and ".v-application .black" properties, but I can't figure out how to do that programmatically.

Setting those properties to background-color:transparent !important in my <style> section doesn't do anything.

[mcasto]

Ah hah!

By stepping the css down to affect the <div id='app'> component, I resolved it.

<style>
#app .white{
background-color: transparent !important;
}

#app .black{
background-color: transparent !important;
}
</style>

[mcasto]

And, of course, by modifying #app .blue, I'm able to remove the blue background.