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

因此，我读过 给你，在 Vue.js 中，您可以在选择器中使用 /deep/或 >>>，以便创建应用于子组件内部元素的样式规则。但是，试图在我的样式中使用它，无论是在 SCSS 中还是在普通的旧 CSS 中，都不起作用。相反，它们被逐字发送到浏览器，因此没有任何效果。例如:

返回文章页面

<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"
}
}
}
// ...

所以我的问题是，我如何让这个 >>>操作员工作？

我已经找到了 这个的答案，但我正在做的正是这一点，它不工作..。

144697 次浏览
小开

我已经成功地使用/deep/在 Vue 的作用域 SCSS 样式表中使用了这种结构:

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

Edit:/deep/正在被弃用，如果它不再适合您，请参考另一个解释: : v-deep 的答案

小开
最佳答案

Vue 2

下面的代码也可以在 Vue 3中使用，但不推荐使用。

顶嘴: 使用 ::v-deep

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

不要 使用 Sass: 使用 >>>

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

无论使用哪种语法，这个组件的 <style>标记都必须是 scoped:

<style scoped>

第3期(及第2.7期)

在 Vue 3中，::v-前缀现在是 不赞成，我们不再需要 >>>。我们可以使用统一的 :deep选择器 无论是否使用萨斯，但是现在建议在选择器中使用括号。

使用 :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>

摘要

第二部分:

  • 不推荐使用 /deep/语法
  • 使用带 Sass 的 ::v-deep，使用不带 Sass 的 >>>

第三集:

  • 不推荐使用 ::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，你想修改使用 devtools在铬或任何浏览器控制台。

然后，在使用 component时，修改它

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

对我来说，唯一起作用的是

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

尽管在 文件中没有找到，但是答案是您尝试访问的组件不能是根组件。将您的单个组件包装在 <div>中，它应该使用 ::v-deep在范围 scss上工作，正如其他人所解释的那样。

小开

我用加法解决了这个问题

options: { styleIsolation: 'shared' }, // add this
methods: {
yourFunc1 () {
}
}
.pet-info{
::v-deep .title {
width: 51px !important;
background-color: red !important
}
}

在类似于方法的组件中配置它，它就是类似于方法的相同级别。

小开

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

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

提交答案