vue3 中 scss 使用 :deep 不支持嵌套怎么办?
时间: 2024-05-09 12:20:32 浏览: 16
在 Vue3 中,可以使用 ::v-deep 替代 :deep 来解决嵌套问题。例如:
```scss
<style lang="scss">
.wrapper {
::v-deep {
.content {
color: red;
}
}
}
</style>
```
注意,::v-deep 是一个深度选择器,它可以穿透组件的作用域限制,所以使用时要慎重,避免产生意外的影响。
相关问题
vue3 中 scss 使用 :deep 不支持嵌套,::v-deep 又即将弃用,怎么办?
在 Vue3 中,可以使用 `::v-deep` 或 `>>>` 来实现深度选择器,但是官方已经宣布 `::v-deep` 即将被弃用,而 `>>>` 在某些情况下会出现问题。
解决方法:
1.使用 `:global`,可以将样式应用于整个组件或应用程序。例如,要应用于整个组件:
```
<style scoped>
:global(.my-class) {
color: red;
}
</style>
```
2.使用 CSS 变量,可以在组件中定义变量,并在样式中使用它们。例如:
```
<style scoped>
:root {
--my-color: red;
}
.my-class {
color: var(--my-color);
}
</style>
```
3.使用 `::v-deep` 的替代方案 `::slotted`,它能在父组件样式中选择子组件的内容。例如:
```
/* 子组件 */
<template>
<div class="my-class">
<slot></slot>
</div>
</template>
/* 父组件 */
<template>
<div>
<slot>
<p class="my-class">This paragraph will be styled</p>
</slot>
</div>
</template>
<style scoped>
::slotted(.my-class) {
color: red;
}
</style>
```
以上是一些可行的解决方法,可以根据实际情况选择适合自己的方式。
vue3中::deep
在 Vue 3 中,`::v-deep` 被替换为 `::deep`。`::deep` 是一个伪类选择器,用于在 CSS 中强制选择所有子孙元素,即使它们被包装在一个组件内。这在编写组件样式时非常有用,因为它允许您选择组件内的子元素,而不考虑它们在DOM中的嵌套层次。
例如,假设您有一个组件,其中包含一个带有类名为 "my-class" 的 div 元素。在组件样式中,您可以使用以下代码选择该元素:
```css
::deep .my-class {
/* styles */
}
```
这将选择该组件内所有具有 "my-class" 类的子元素,无论它们嵌套在多深的组件内都可以被选择。