Why after installing Vuetify some weird modifications implemented on divs and table? - vue.js

Question

I'm using Laravel and VueJS for my training project. A few days ago I got familiar with Vuetify and that's something cool everybody would be willing to use. I did so. But After using the Vuetify project some weird modifications were implemented to my styles. For example, after using the vuetify this modified the main container and dropdown with a black border that is not defined by me anywhere. Also, it changed the design of my table changed colors, hover action, select dropdowns, inputs and much more of the same table. I then removed the vuetify code and my styles are again ok. But when I use vuetify it changes the styles of some divs, tables, hover actions, etc.
Here is the code i tried
app.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import '#mdi/font/css/materialdesignicons.css'
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
})
index.vue
<v-btn color="#13af58" class="white--text">Submit Form</v-btn>
<v-btn variant="plain" color="#3c88fe" size="small"> View </v-btn>
<v-btn variant="plain" color="#3c88fe" size="small">Download</v-btn>
This is the only code I used from vuetify that is creating problems with the current styles (e.g. divs, tables, hover action, etc).
Here is the full code of app.js in case you want to check the full code
// import './bootstrap';
import { createApp, h } from 'vue'
import { createInertiaApp } from '#inertiajs/inertia-vue3'
import '../css/app.css'
import { InertiaProgress } from '#inertiajs/progress'
import {ZiggyVue} from 'ziggy'
import MainHeader from '#/Pages/Components/MainLayout/MainHeader.vue'
//Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import '#mdi/font/css/materialdesignicons.css'
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
})
// Icons Font-Awesome
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import {
faPhone,
faHouse,
faNoteSticky,
faMoneyCheckDollar,
faReceipt,
faEye,
faBell,
faCakeCandles,
faPersonHalfDress,
faArrowDown,
faArrowUp,
faGauge,
faMoneyBills,
faMinus,
faGraduationCap,
faHand,
faHourglass,
faUserSlash,
faFileCircleCheck,
faCircleCheck,
faCircleXmark,
} from '#fortawesome/free-solid-svg-icons'
library.add([
faPhone,
faHouse,
faNoteSticky,
faMoneyCheckDollar,
faReceipt,
faEye,
faBell,
faCakeCandles,
faPersonHalfDress,
faArrowDown,
faArrowUp,
faGauge,
faMoneyBills,
faMinus,
faGraduationCap,
faHand,
faHourglass,
faUserSlash,
faFileCircleCheck,
faCircleCheck,
faCircleXmark,
])
InertiaProgress.init({
delay: 0,
color: '#29d',
includeCSS: true,
showSpinner: false,
})
createInertiaApp({
resolve: async (name) => {
const pages = import.meta.glob('./Pages/**/*.vue')
const page = await pages[`./Pages/${name}.vue`]()
page.default.layout = page.default.layout || [MainHeader]
return page
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.component('font-awesome-icon', FontAwesomeIcon)
.use(plugin)
.use(ZiggyVue)
.use(vuetify)
.mount(el)
},
})