Vue 2

• 以下内容也适用于Vue 3，但已弃用。*

“你在说什么” 使用::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>

避免使用/deep/，而使用::v-deep

任何作用域为component's的css都可以通过使用deep selector进行更改，但/deep/很快就会被弃用
Vue Github参考-https://github.com/vuejs/vue-loader/issues/913

在此情况下使用::v-deep，并避免使用过时的/deep/

参考-深度选择器
只需检查渲染的element的类，您可以在chrome或任何浏览器控制台中使用devtools修改该类。
然后，在您使用component时，修改它

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

我已经在Vue的作用域SCSS样式表中成功地使用了/deep/，其结构如下：

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

Edit：/deep/已被弃用，如果它不再适用于您，请参阅解释以下内容的其他答案：：v-deep

不推荐使用：：v-deep作为组合符。请用途：deep（）。

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

对我来说，唯一有效的办法就是

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

虽然在文档中找不到，但答案是您试图访问的组件不能是根组件。将单个组件 Package 在<div>中，它应该可以在作用域为scss的::v-deep上工作，正如其他人所解释的那样。

我通过添加以下内容解决了此问题
第一个
在组件中像方法一样配置它，它和方法是同一级别的。