I am currently utilizing stylus and scoped CSS styles with Vuetify. Despite trying to use deep nested selectors such as ::v-deep or >>&, I have not been successful in getting them to work (even after rebuilding the project due to issues with hot reload). Whenever I click on a textbox, a particular class is applied to it (presumably coming from Vuetify).
.v-application --primary-text{
color:white !important
}
Now, my attempts to change and override this style have proven to be unsuccessful.
<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 Section
<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: '',
}
},
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>