vuetify导航抽屉，链接中的图标的颜色已更改

Question

以下是代码：

 <template lang="html">
 <v-navigation-drawer
  class="pb-0"
  persistent
  temporary
  absolute
  height="100%"
  clipped
  enable-resize-watcher
  v-model="sideMenu"
  v-if="isLoggedIn">
  <v-list dense>
        <template v-for="(item, i) in items">
          <v-divider
            v-if="item.divider"
            class="my-4"
            :key="i"
          ></v-divider>
          <v-list-tile
            :key="i"
            v-else
            :to="item.to"
            class="side-menu-drawer"
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
</template>

<script>
  export default {
    name: 'sideMenu',
    data () {
      return {
        sideMenu: true,
        items: [
          { icon: 'lightbulb_outline', text: 'Notes', to: '#' },
          { icon: 'touch_app', text: 'Reminders', to: '#' },
          { divider: true },
          { icon: 'add', text: 'Create new question', to: '/question' },
          { divider: true },
          { icon: 'archive', text: 'Archive', to: '#' },
          { icon: 'delete', text: 'Trash', to: '#' },
          { divider: true },
          { icon: 'settings', text: 'Settings', to: '#' },
          { icon: 'chat_bubble', text: 'Trash', to: '#' },
          { icon: 'help', text: 'Help', to: '#' },
          { icon: 'phonelink', text: 'App downloads', to: '#' },
          { icon: 'keyboard', text: 'Keyboard shortcuts', to: '#' }
        ]
      }
    }
  }
</script>

<style lang="css" scoped>
  material-icon {
    text-decoration: none;
    color: inherit;
  }
</style>

触发结束或访问时，文本不会更改。但是，一旦链接被访问，图标确实会改变颜色。

我尝试添加类来强制执行预期的行为，但到目前为止还没有结果。

这是我尝试的课程：

{
    text-decoration: none;
    color: inherit;
  }