scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题

在SCSS中使用::v-deep可以帮助你穿透Vue组件的作用域，直接修改子组件的样式。但是，如果你遇到了“父组件中使用::v-deep修改样式穿透到子组件出现问题”，可能是以下原因导致的：

1. 选择器优先级问题：如果你的父组件选择器优先级不足以覆盖子组件的样式，那么子组件的样式可能会继续应用。
2. 语法错误：检查::v-deep的使用是否正确，例如是否有多余的空格或拼写错误。
3. 使用了局部作用域插槽：如果你在父组件中使用了<style scoped>，那么::v-deep将不会生效。

解决方法：

1. 提高选择器优先级：你可以通过增加选择器的特异性来确保父组件的样式能覆盖子组件的样式。
2. 检查并修正语法错误：确保::v-deep的使用是正确的。
3. 移除scoped属性：如果你不希望保持子组件的样式只在该组件内部生效，可以从父组件的<style>标签中移除scoped属性。

示例代码：

父组件：

<template>
  <div class="parent">
    <child-component></child-component>
  </div>
</template>
 
<style scoped lang="scss">
// 移除scoped属性或者在父组件中使用非scoped样式
::v-deep .child-style {
  color: blue;
}
</style>

子组件：

<template>
  <div class="child-style">
    <!-- 子组件内容 -->
  </div>
</template>
 
<style lang="scss">
.child-style {
  color: red; /* 默认样式 */
}
</style>

在这个例子中，即使子组件有自己的样式，父组件中定义的::v-deep .child-style的样式也会生效，因为它覆盖了子组件的样式。