解决在 UniApp 中，deep不生效的问题

在 UniApp 中，使用 :deep、/deep/ 或 ::v-deep 修改子组件或第三方组件样式时，可能会遇到不生效的问题。以下是常见原因及解决方案：

---

• CSS ：可以使用 >>>、/deep/ 或 ::v-deep。
• Less/Node-Sass ：支持 /deep/ 和 ::v-deep。
• Dart-Sass ：仅支持 ::v-deep，不支持 /deep/。

解决方法：

• 如果使用 scss（Dart-Sass），请统一改用 ::v-deep。

示例：

::v-deep .className {
  color: red;
}

---

2. 微信小程序样式隔离

在 UniApp 编译到微信小程序时，默认存在组件样式隔离 ，导致 /deep/ 或 ::v-deep 失效。

解决方法 ：

在组件的 script 部分添加 options: { styleIsolation: 'shared' }，解除样式隔离：

Vue2：

export default {
  options: {
    styleIsolation: 'shared' // 允许样式穿透
  },
  data() { return {} },
  methods: {}
}

Vue3：

defineOptions({
  options: {
    styleIsolation: 'shared' // 允许样式穿透（微信小程序）
  }
})

此方法适用于嵌套组件或分包场景。

---

3. ::v-deep 写法错误

• 必须使用双冒号 ::v-deep，单冒号 :v-deep 无效。

必须写在正确位置，不能滥用：

/* 正确写法 */
.parent-class ::v-deep .child-class { color: red; }

/* 错误写法 */
::v-deep { .child-class { color: red; } } // 无

---

4. 作用域 ( scoped ) 冲突

如果组件的 <style> 带有 scoped 属性，可能会导致穿透失效。可以尝试：

• 确保 ::v-deep 在 scoped 样式块内使用。
• 必要时移除 scoped（不推荐，可能影响样式全局性）。

---

5. 其他可能原因

• 使用了 !important 仍无效：可能是优先级问题，检查选择器是否正确。
• 全局组件样式修改 ：如果修改的是全局组件（如 uni-navbar），确保穿透选择器层级正确。

---

总结建议

1. 优先使用 ::v-deep（兼容性最好）。
2. 添加 styleIsolation: 'shared' （小程序环境必选）。
3. 检查预处理器类型 （Dart-Sass 需避免 /deep/）。

如果仍不生效，可以检查控制台是否有 Sass/Less 编译错误，或尝试更换选择器写法。