如何修改v-table全局CSS？Vuetify默认样式覆盖问题求助

我的项目组件结构如下：

src
 |___assets
       |____css
             |_____main.css
 |___components
       |____info
             |_____info.vue

我在info.vue中使用v-table展示信息，因其他文件也存在v-table，故在main.css中定义了全局CSS类。但其他组件的CSS均生效，唯独v-table的样式不生效。

main.css中v-table相关代码：

v-table {
    border: 1px solid var(--black);
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 20px;
}

v-table.FR {
    width: 1010px;
    display: inline-table;
    margin-left: auto;
    margin-right: auto;
}

v-table.FR td, v-table.FR tr.C1 td {
    background-color: #E8E8E8;
}

info.vue中的v-table代码：

<v-table
      class="FR"
      cellspacing="0"
    >
      <tr>
        <th colspan="5">
          Info
        </th>
      </tr>
      <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
      </tr>
      <tbody>
        <tr class="C1">
          <td class="center">
            1
          </td>
          <td class="right">
            2
          </td>
          <td class="right">
            3
          </td>
          <td class="right">
            4
          </td>
          <td class="right">
            5
          </td>
        </tr>
      </tbody>
    </v-table>

浏览器调试器显示Vuetify自动添加了v-theme-light和v-table--density-default类，这些类覆盖了main.css中的样式，比如某padding属性完全破坏了预期表格格式。请问能否覆盖或删除这些默认类？

一、覆盖默认样式 #

Vuetify默认类的优先级高于你的全局CSS，可通过提升选择器权重来覆盖：

1. 增强选择器特异性
   在原有选择器基础上，追加Vuetify自动生成的类，精准定位目标元素：

   /* 覆盖密度类的padding及基础样式 */
   v-table.FR.v-table--density-default {
     padding: 0; /* 替换为你需要的值 */
     border: 1px solid var(--black);
     border-spacing: 0;
     border-collapse: collapse;
     margin-bottom: 20px;
   }
   
   /* 覆盖单元格样式 */
   v-table.FR.v-table--density-default td, 
   v-table.FR.v-table--density-default tr.C1 td {
     background-color: #E8E8E8;
     padding: 8px; /* 自定义内边距 */
   }
   

   若需紧急生效，可临时使用!important（不建议滥用，避免样式冲突）。

2. 穿透Scoped CSS（若组件用了scoped）
   若info.vue的<style>标签添加了scoped属性，需用深度选择器::v-deep突破作用域限制：

   <style scoped>
   ::v-deep v-table.FR {
     /* 自定义样式 */
   }
   </style>
   

二、移除或修改默认类 #

1. 移除密度类
   Vuetify的v-table默认会添加密度类，通过设置density属性为null可禁用该行为：

   <v-table
     class="FR"
     cellspacing="0"
     :density="null"
   >
     <!-- 表格内容 -->
   </v-table>
   

   此操作会阻止v-table--density-default类的生成。

2. 自定义主题类
   若想替换v-theme-light，可给v-table设置theme属性为自定义值：

   <v-table
     class="FR"
     cellspacing="0"
     theme="custom-table"
   >
     <!-- 表格内容 -->
   </v-table>
   

   随后在全局CSS中针对v-theme-custom-table编写样式即可。注意：不建议完全移除主题类，否则可能影响Vuetify组件的样式一致性。

内容的提问来源于stack exchange，提问作者Dairelys García Rivas