css - 如何在 vuetify 中更改样式 prev-icon 和 next-icon 道具?

Question

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

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

}

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

标签： cssvue.jsvuetify.js

Answer 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>