安装Vuetify后div、table等元素样式异常改动的原因排查

问题根源 #

你遇到的是Vuetify全局样式与项目原有自定义样式冲突的问题。当导入vuetify/styles时，Vuetify会加载一套全局样式重置规则、基础元素默认样式（包含表格、输入框、容器等），这些样式会覆盖你项目中原有的CSS设置——哪怕只使用v-btn组件，全局样式依然会生效，最终导致页面元素出现异常边框、样式改变。

解决方案 #

1. 调整样式导入顺序 #

将你的自定义样式文件放在Vuetify样式之后导入，让自定义样式拥有更高优先级，覆盖Vuetify的全局样式：
修改app.js中的导入顺序：

// 先导入Vuetify样式
import 'vuetify/styles'
// 再导入项目自定义样式
import '../css/app.css'

2. 按需导入Vuetify组件 #

当前你全量导入了所有Vuetify组件和指令，会引入大量不必要的样式。改为只导入你需要的v-btn组件，减少全局样式的注入：
修改Vuetify初始化代码：

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
// 仅导入需要的v-btn组件
import { VBtn } from 'vuetify/components'

const vuetify = createVuetify({
  components: {
    VBtn // 仅注册v-btn组件
  },
  // 若不需要Vuetify指令，可删除directives相关代码
})

3. 手动覆盖冲突样式 #

针对出现异常的元素（如主容器、表格、下拉框），在app.css中重新定义样式，明确指定规则覆盖Vuetify的默认设置：
示例：

/* 重置主容器边框 */
.container {
  border: none !important;
}

/* 恢复表格原有hover效果 */
.table tr:hover {
  background-color: #f5f5f5 !important;
}

如果是Vue组件内的scoped样式，可以使用深度选择器::v-deep来修改全局样式：

<style scoped>
::v-deep .table tr:hover {
  background-color: #f5f5f5;
}
</style>

4. 禁用Vuetify全局基础样式（进阶） #

如果完全不需要Vuetify的全局样式重置，可以放弃导入vuetify/styles，改为仅导入单个组件的样式文件。但此方法可能导致组件样式缺失，需要自行补充：

// 不导入全局样式
// import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components'
// 仅导入v-btn的组件样式
import 'vuetify/lib/components/VBtn/style.css'

const vuetify = createVuetify({
  components: { VBtn }
})

内容的提问来源于stack exchange，提问作者VUELOVER