How to prevent Vuetify from overriding Bootstrap Vue styles in a mixed Vue.js project?

Question

I am working on a Vue.js 2.x project that primarily uses Bootstrap Vue for the UI components. Due to certain limitations in Bootstrap Vue's tables, I decided to integrate Vuetify data tables for their additional functionalities. However, I've encountered a significant issue with CSS styles.

Whenever I import any component from Vuetify, it interferes with the existing Bootstrap Vue styling, particularly by altering the styles applied to various column classes. This is causing inconsistencies in the UI layout and design across components.

Here's an example demonstrating how the default padding from Bootstrap Vue is being overridden.

Before importing Vuetify component (desired styling):

[dir=ltr] .col, ... { /* truncated for brevity */
    padding-right: 1rem;
    padding-left: 1rem;
}

After importing the component:

[dir=ltr] .col, ... { /* truncated for brevity */
    padding: 12px;
}

Example implementation of vuetify component

<!-- MyOptimizedComponent.vue -->

<template>
  <div>
    <!-- Using a specific BootstrapVue component -->
    <b-button variant="primary">BootstrapVue Button</b-button>

    <!-- Using specific Vuetify components -->
    <v-btn color="success">Vuetify Button</v-btn>
    <v-icon>mdi-home</v-icon>
  </div>
</template>

<script>
// Importing individual components from BootstrapVue
import { BButton } from 'bootstrap-vue';

// Importing individual components from Vuetify
import { VBtn, VIcon } from 'vuetify/lib';

export default {
  name: 'MyOptimizedComponent',
  components: {
    // Registering the imported BootstrapVue component
    BButton,
    // Registering the imported Vuetify components
    VBtn,
    VIcon
  },
  // rest of your component setup...
};
</script>

<style scoped>

</style>

This overriding occurs even though Vuetify is used within a very limited scope — only in specific components, and these components are used inside other Vue pages. The issue persists regardless of the presence of scoped CSS. I've also tried using a CSS reset, to no avail.

What I am seeking is a way to use Vuetify components in certain parts of my app without letting Vuetify styles bleed into and disrupt my Bootstrap Vue styling.

Specifically, my questions are:

• Is there a way to restrict Vuetify's CSS only to the components where it's needed, thereby preventing it from affecting global styles or Bootstrap Vue components?
• Are there known best practices when mixing different UI component libraries to maintain style consistency?

I appreciate any insights or suggestions on how to resolve this style conflict effectively.