时间戳

首页 > 解决方案 > 如何在 css 中更改 Vuetify v-icon 颜色

vue.js - 如何在 css 中更改 Vuetify v-icon 颜色

问题描述

Vuetifyv-icon通常将它的颜色与一个类一起使用。menu-icon就我而言，当我的路由器链接处于活动状态时，我试图用一个 css 类来改变它的颜色。

        <v-btn icon class="menu-btn">
            <router-link to="/client/dashboard">
                <v-icon class="menu-icon">
                    mdi-gauge-full
                </v-icon>
                <div class="menu-titles">Dashboard</div>
            </router-link>
        </v-btn>

    .router-link-active .menu-icon {
        color: #2F80ED ;
    }

问题是v-icon似乎不接受 css 颜色属性。有没有办法用 css 改变它？

标签： vue.jsvuetify.js

解决方案

<v-icon>使用其 CSScolor属性的值并将其映射到fill其 SVG 子项的属性（使用fill="currentColor"）。

因此，您只需将colorCSS 值设置为 on .v-icon，它就会起作用：

简单的例子：

<v-icon large>mdi-domain</v-icon>

在 CSS 中：

i.v-icon.v-icon {
  color: red;
}

工作示例：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
i.v-icon.v-icon {
  color: red;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-icon>mdi-domain</v-icon>
    </v-content>
  </v-app>
</div>

我建议不要使用!important.
默认情况下，Vuetifycolor使用2 × class特定性（即：）设置图标的数量.theme--light.v-icon，因此我们需要使用稍高的i.v-icon.v-icon（1 × el + 2 × class）。

显然，如果你想内联，你总是可以使用内联样式的反模式：

<v-icon large style="color: red;">mdi-domain</v-icon>

像任何反模式一样，不推荐使用它。但这是可能的。

推荐阅读