如何为组件的特定实例修改 Vuetify sass 变量？答案

【问题标题】：How can I modify a Vuetify sass variable for a specific instance of a component?如何为组件的特定实例修改 Vuetify sass 变量？
【发布时间】：2021-11-12 16:42:38
【问题描述】：

我在https://codepen.io/james-hudson3010/pen/gORvzdG 有一个示例代码笔

对于树视图的第一个实例，我想使用 8 像素的树视图节点级别宽度。树视图的第二个实例应该保持不变。

如何定位特定的树视图实例并修改变量的值？

Javascript：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        id: 5,
        name: 'Documents :',
        children: [
          {
            id: 6,
            name: 'vuetify :',
            children: [
              {
                id: 7,
                name: 'src :',
                children: [
                  { id: 8, name: 'index : ts' },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
})

HTML：

<div id="app">
  <v-app id="inspire">
    <v-treeview :items="items"></v-treeview>
    <v-treeview :items="items"></v-treeview>
  </v-app>
</div>

【问题讨论】：

标签： vue.js sass vue-component vuetify.js

【解决方案1】：

我认为在这种情况下您不需要覆盖 sass 变量，只需覆盖特定实例上的目标类即可。

<div id="app">
  <v-app id="inspire">
    <v-treeview class="narrow" :items="items"></v-treeview>
    <v-treeview :items="items"></v-treeview>
  </v-app>
</div>

<style>
.narrow .v-treeview-node__level {
  width: 8px !important;
}
</style>

【讨论】：