Vue.js手写笔和作用域css不工作

Question

我在vuetify中使用了手写笔和范围css样式。我尝试使用深度嵌套选择器::v-deep或>>>，但它们都不适用于我(尽管我重新构建了项目，因为热重新加载有时不起作用)，每当我点击textbox时，这个类就会被应用到它(我相信来自vuetify

.v-application --primary-text{
   color:white !important
}

现在，我尝试通过更改和覆盖此样式，但它们都不起作用。

<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>
  <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

在尝试任何CSS之前，你先安装了stylus吗？

yarn add -D stylus stylus-loader

https://vue-loader.vuejs.org/guide/pre-processors.html#stylus

作为选择器，这确实应该是::v-deep。

选择器的引用：https://stackoverflow.com/a/55368933/8816585

Answer 2

我解决这个问题的方法是添加

​

options: { styleIsolation: 'shared' }, // add this
methods: {
  yourFunc1 () {
  }
}

​

。在像方法一样的组件中配置它，它与方法是同一级别的。