Theme style seems to override everything else - vue.js

Question

I am trying to give an element in my page a custom colour but all attempts are foiled by the Vuetify enforcing the important! on the component themes. I have followed the docs and tried:
v-list-item.selection(class="red--text")
and
v-list-item.selection(color="red")
then got desperate and tried
.selection {
color: red
}
and
.theme--light.v-list-item {
color: red
}
But the theme color just overrules everything by applying:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(0, 0, 0, 0.87) !important;
}
What do?

Answer 1

You can overwrite it by adding the same rule in your App.vue:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: red !important;
}
Or you can increase specificity by adding your own class to that element:
<div class="custom-list-item"></div>
...
.custom-list-item {
color: red !important;
}
Or you can specifically change color of all elements inside it, if it works for you:
.theme--light.v-list-item * {
color: red !important;
}

Answer 2

One might work (but not a good practice at all):
.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
Edit:
The answer I gave above will not work if you use scoped style
As working around myself, and have read a comment here. I don't think change Vuetify's style in a Vuetify component is easy. Instead, by using a Vuetify's component, you should predefine the colors you'll ever use, and then you could use those colors in the components you want.
To workaround without configuring Vuetify, then you can:
Combine inline style + !important
<v-list-item style="color: red !important">Content</v-list-item>
Don't use Vuetify's component, use vanilla html (for this component) instead