如何在 vuetify <v-slide-group> 中更改样式 prev-icon 和 next-icon 道具？答案

【问题标题】：how to change style prev-icon & next-icon props in vuetify <v-slide-group>?如何在 vuetify <v-slide-group> 中更改样式 prev-icon 和 next-icon 道具？
【发布时间】：2020-10-06 12:26:16
【问题描述】：

我正在尝试添加背景颜色并更改 vuetify 幻灯片组道具上的上一个图标和下一个图标的图标颜色。如果我以从控制台获得的类为目标，则它不起作用。但是如果我从我的样式标签中删除范围或尝试更改控制台样式的颜色，它正在工作。

 .v-slide-group__next.theme--light.v-icon
{
    color: rgb(234, 10, 10)!important;

}

我已经尝试过这种方式，但它不起作用。如何设置这些道具图标的样式？提前致谢。

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

为了定位具有类的元素，必须使用不带“范围”的<style>，因为“范围”会自动在每个应用构建的类选择器中添加唯一的哈希值。这可以防止使用这种方式定位 Vuetify 的元素。我建议您在包装容器上添加一些类，例如 class="my-slider" 并像这样定位它：

<template>
 <div>
   <v-slide-group class="my-slider">
 </div>
</template>
<style>
.my-slider > .v-slide-group__next.theme--light.v-icon
{
    color: rgb(234, 10, 10)!important;

}
</style>

【讨论】：