如何为Vuetify特定组件实例修改Sass变量？以Treeview组件为例

实现方法 #

Sass变量属于预编译阶段生效的全局配置，直接修改会作用于所有Treeview实例，要单独修改单个实例的缩进宽度，按以下步骤操作即可：

1. 给需要修改的第一个v-treeview组件添加自定义类名，用来做样式范围限定：

<div id="app">
  <v-app id="inspire">
    <!-- 新增自定义类custom-treeview做范围限定 -->
    <v-treeview class="custom-treeview" :items="items"></v-treeview>
    <v-treeview :items="items"></v-treeview>
  </v-app>
</div>

2. 添加对应样式覆盖默认缩进：

• 如果是全局样式文件，直接写入以下代码：

.custom-treeview .v-treeview-node__level {
  padding-left: 8px !important;
}

• 如果是Vue单文件组件的<style scoped>块，需要加深度选择器：

<style scoped>
::v-deep .custom-treeview .v-treeview-node__level {
  padding-left: 8px !important;
}
</style>

修改后只有第一个Treeview的层级缩进宽度为8px，第二个保持默认值不变，和修改$treeview-node-level-width变量的效果完全一致。

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