Css &燃气轮机&燃气轮机&燃气轮机；或：：v-deep不在Vue项目中工作

我当前想替换Laravel/Vue项目中的

/deep/

：v-deep或

>

，因为它已被弃用。但是唯一能保持工作的是

/deep/

，其他选项似乎不起作用。例如，我的组件中有以下样式：

<style scoped>
.v-data-table
  >>>
  tbody
  >>>
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}

.v-data-table >>> tr {
  height: 60px;
}
</style>

和我的

webpack.mix.js

config:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .options({
        postCss: [
            require('autoprefixer'),
        ],
    })

我目前缺少什么不能使用新的深度选择器？感谢您的帮助

更新：

完整组件如下所示：

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :disable-sort="true"
    :item-key="itemKey"
    :disable-pagination="true"
    :hide-default-footer="true"
    :search="search"
  >
    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "BaseDataTable",
  props: {
    headers: Array,
    items: Array,
    itemKey: {
      type: String,
      default: "id"
    },
    search: {
      type: String,
      required: false
    }
  }
};
</script>

<style scoped>
.v-data-table
  /deep/
  tbody
  /deep/
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}

.v-data-table /deep/ tr {
  height: 60px;
}
</style>

导出默认值{
名称：“BaseDataTable”，
道具：{
标题：数组，
项目：阵列，
itemKey：{
类型：字符串，
默认值：“id”
},
搜索：{
类型：字符串，
必填项：false
}
}
};
.v-数据表
/深沉的/
表格主体
/深沉的/
tr:hover:not（.v-data-table\uuuuu扩展内容）{
背景：#ffffff！重要；
}
.v-数据表/deep/tr{
高度：60px；
}

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :disable-sort="true"
    :item-key="itemKey"
    :disable-pagination="true"
    :hide-default-footer="true"
    :search="search"
  >
    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "BaseDataTable",
  props: {
    headers: Array,
    items: Array,
    itemKey: {
      type: String,
      default: "id"
    },
    search: {
      type: String,
      required: false
    }
  }
};
</script>

<style scoped>
.v-data-table
  /deep/
  tbody
  /deep/
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}

.v-data-table /deep/ tr {
  height: 60px;
}
</style>