Vue.js stylus and scoped css is not working - css

Question

I'm using stylus and scoped css styles with vuetify. I tried using deep nested selector ::v-deep or >>> but none of them had worked for me (eventhough i rebuild the project because hot reload sometimes is not working) Whenever i click on textbox, this class is being applied to it (i believe coming from vuetify
.v-application --primary-text{
color:white !important
}
Now I tried changing and overriding this style via but none of them had worked.
<style lang="stylus" scoped>
.v-application
&.primary--text
color:black !important
.sample
color:red !important
.v-application >>> .primary--text
color:black !important
.v-application /deep/ .primary--text
color:black !important
.v-application::v-deep .primary--text{
color:black !important
}
</style>
Template part
<template>
<div>
<v-text-field
v-model="name"
label="Regular"
counter="25"
hint="This field uses counter prop"
#input="updateFilter"
#keyup.enter="onEnter"
clearable
:class="sample"
>
<v-icon small #click="submit">fas fa-search</v-icon>
</v-text-field>
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
name: 'MultiSearch',
data() {
return {
name: '',
// title: 'Preliminary report',
// description: 'California is a state in the western United States',
// rules: [(v) => v.length <= 25 || 'Max 25 characters'],
// wordsRules: [(v) => v.trim().split(' ').length <= 5 || 'Max 5 words'],
}
},
methods: {
updateFilter(event) {
console.log('event is', event)
console.log('this name', this.name)
},
submit(event) {
console.log('event is', event)
console.log('clicked', this.name)
this.$emit('updateFilter', this.name)
},
onEnter(event) {
console.log('entered is ', event)
},
},
})
</script>

Answer 1

Did you installed stylus at first before trying any CSS ?
yarn add -D stylus stylus-loader
https://vue-loader.vuejs.org/guide/pre-processors.html#stylus
As of the selector, this should be ::v-deep indeed.
Reference for the selectors: https://stackoverflow.com/a/55368933/8816585

Answer 2

I solved this problem by adding
options: { styleIsolation: 'shared' }, // add this
methods: {
yourFunc1 () {
}
}
.
Config this in the components like the methods, it's the same level like methods.