Vue.js 主题风格似乎凌驾于其他一切之上

我试图给我的页面中的一个元素一个自定义颜色，但所有的尝试都被Vuetify强制执行

重要。我已经遵循了文档并尝试：

v-list-item.selection(class="red--text")

及

然后绝望地试了试

.selection {
  color: red
}

及

但主题颜色只是通过应用以下内容来推翻一切：

.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: rgba(0, 0, 0, 0.87) !important;
}

怎么办？
您可以通过在
应用程序中添加相同的规则来覆盖它。vue
：

.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: red !important;
}

或者，您可以通过向该元素添加您自己的类来增加特定性：

<div class="custom-list-item"></div>

...

.custom-list-item {
    color: red !important;
}

一个可能有效（但根本不是一个好的实践）：


编辑：

如果使用
范围样式

就像在我身边工作一样，我也读过。我认为在Vuetify组件中更改Vuetify的样式并不容易。相反，通过使用Vuetify的组件，您应该预定义将要使用的颜色，然后可以在所需的组件中使用这些颜色

要在不配置Vuetify的情况下解决问题，您可以：


组合内联样式+
！重要信息

内容


不要使用Vuetify的组件，而是使用香草html（用于此组件）
出于两个原因，我确实试图避免这种方法。首先-使用！重要提示：感觉不正确并阻止优雅的可组合代码。通过引用.theme--light元素来设计它们的样式将我绑定到lib生成的类中，并且将来可能会出错。我想要的是文档化的方式（我的示例1和示例2）能够正常工作。@Rince我自己也尝试过，
.v-application.red--text
被
.theme--light.v-list-item:not（.v-list-item--active）：not（.v-list-item--disabled）
覆盖，这似乎是Vuetify的一个bug，因为
v-list-item
通过
：not
s获得了太多的特殊性。尝试将
v-list-item
替换为
v-subheader
，
class=“red--text”
按预期将文本变为红色。似乎是一只虫子。
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: red !important;
}

<div class="custom-list-item"></div>

...

.custom-list-item {
    color: red !important;
}

.theme--light.v-list-item * {
    color: red !important;
}

.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled).selection {
    color: red !important;
}
// it's more than Vuetify's style the `.selection` specificity

<v-list-item style="color: red !important">Content</v-list-item>