0

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>
curiosityrock
  • 213
  • 4
  • 20

2 Answers2

0

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

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Yes i have stylus working for other files that i have so i don't think that's the issue. Is only ::v-deep working for stylus ? Not the ">>>" one? Thanks for the answer – curiosityrock Mar 30 '21 at 01:02
  • I've edited my answer with a reference answer for the selectors. In your case, it is more of a CSS selector issue I guess. What do you see in your devtools, is your CSS not applied or over-written ? Does `::v-deep .v-application .primary--text` work ? Always wrote things this way. – kissu Mar 30 '21 at 07:45
0

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.

吴张明
  • 379
  • 3
  • 6