如何在 Vue.js 中使用 /deep/ 或 >>> 或 ::v-deep？

Question

因此，我在here读到，在 Vue.js 中，您可以在选择器中使用

/deep/

或

>>>

来创建适用于子组件内部元素的样式规则。然而，尝试在我的样式中使用它，无论是在 SCSS 还是普通的旧 CSS 中，都是行不通的。相反，它们会逐字发送到浏览器，因此没有任何效果。例如：

home.vue：

<style lang="css" scoped>
.autocomplete >>> .autocomplete-input 
{
// ...
}
</style>

生成的CSS：

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

我想要什么：

<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>

我的与

vue-loader

有关的 webpack 配置如下所示：

// ...
{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

所以我的问题是，如何让这个

>>>

运算符工作？

我已经找到了this答案，但我正在这样做，但它不起作用......

Answer 1

Vue 2.0 - 2.6

^{以下内容也适用于 Vue 3，但已弃用。}

Sass：  使用

::v-deep

::v-deep .child-class {
    background-color: #000;
}

不使用Sass：   使用

>>>

>>> .child-class {
    background-color: #000;
}

无论使用哪种语法，该组件的

<style>

标签都必须是

scoped

:

<style scoped>

---

Vue 3（和 Vue 2.7）

在 Vue 3 中，

::v-

前缀现已弃用，我们不再需要

>>>

。我们可以使用统一的

:deep

选择器无论是否使用Sass，但是现在建议在选择器中使用括号。

使用

:deep(.child-class)

:deep(.child-class) {
    background-color: #000;
}

^{这也适用于 Vue 2.7（Vue 2 最终版本）}

---

Vue 3 个新选择器

此外，在 Vue 3 中，具有 <slot> 的组件有一个

新功能

，可以对传递的槽内容进行样式化。

老虎机内容   使用

:slotted(.child-class)

:slotted(.slot-class) {
    background-color: #000;
}

最后，在 Vue 3 中，有一个新功能，甚至可以从

scoped

组件注册全局样式：

全局样式   使用

:global(.my-class)

:global(.my-class) {
    background-color: #000;
}

对于任何语法，该组件的

<style>

标签都必须是

scoped

:

<style scoped>

---

总结

在 Vue 2 中：

• /deep/

  语法已弃用
• 在 Sass 中使用

  ::v-deep

  ，在不使用 Sass 的情况下使用

  >>>

在 Vue 3 中：

• ::v-deep .child-class

  已弃用，取而代之的是

  :deep(.child-class)

• ::v-

  前缀已弃用，取而代之的是

  :

• >>>

  语法已弃用

• /deep/

  语法已弃用
• 有新的

  :slotted

  和

  :global

  选择器

对于每个版本/语法，该组件的

<style>

标签必须是

scoped

:

<style scoped>

Answer 2

避免使用

/deep/

而是使用

::v-deep

任何范围内的

component's

css 都可以使用

deep selector

进行更改 但很快

/deep/

就会被弃用

Vue Github 参考 - https://github.com/vuejs/vue-loader/issues/913

在这种情况下使用

::v-deep

，并避免弃用

/deep/

参考 - 深度选择器

只需在 Chrome 或任何浏览器控制台中使用

element

检查要修改的渲染

devtools

的类即可。

然后，在你消费

component

时，修改它

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>

Answer 3

我已经成功地在 Vue 的范围 SCSS 样式表中使用了 /deep/ 并具有以下结构：

.parent-class {
  & /deep/ .child-class {
    background-color: #000;
  }
}

编辑：/deep/ 已被弃用，如果它不再适合您，请参阅解释 ::v-deep

的其他答案

Answer 4

::v-deep 作为组合器的用法已被弃用。使用 :deep() 代替。

:deep(.child-class) {
    background-color: #000;
}

Answer 5

对我来说，唯一有效的是

<style scoped>.  // sass and scss didn't work
  >>> .deep-selector {
    ...
  }
</style>

Answer 6

虽然在文档中没有找到，但答案是您尝试访问的组件不能是根组件。将单个组件包装在

<div>

中，它应该可以在作用域

::v-deep

上使用

scss

，正如其他人所解释的那样。

Answer 7

我通过添加解决了这个问题

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

.pet-info{
  ::v-deep .title {
    width: 51px !important;
    background-color: red !important
  }
}

和方法一样在组件中配置，和方法是同一级别的

Answer 8

要覆盖 Vue.js 中特定元素的 CSS 属性，请使用 Vuetify，下面对我有用：

<style scoped>
::v-deep .v-overlay__content {
    contain: none !important;
}
</style>

或

<style scoped>
>>> .v-overlay__content {
    contain: none !important;
}
</style>

Answer 9

考虑您的此模式具有特定类别“批准模式”：

<v-dialog v-model="requestForApproveModal" class="approval-modal">
...
</v-dialog> 

您可以使用 scoped 样式块内的 CSS 代码选择此模式的子类：

<style scoped>
.approval-modal:deep(.v-alert__content){
  font-size: 18px;
}
</style>

另请注意，在我的示例中，我使用深度选择器选择的“v-alert__content”适用于 vuetify alert 组件。