uni-app 【报Bug】vue3 nvue页面通过class设置样式 影响到了子组件非最外层的同class元素样式 无法scoped vue2则不会

在 uni-app 中使用 vue3 开发 nvue 页面时，通过 class 设置样式可能会影响到子组件中非最外层的同 class 元素样式，而在 vue2 中则不会出现这个问题。这是因为 vue3 和 vue2 在处理样式作用域（scoped）时有一些差异。

问题原因

在 vue3 中，scoped 样式的实现方式与 vue2 有所不同。vue3 使用了 PostCSS 的 scoped 插件来处理样式作用域，但 nvue 页面的样式处理机制与 vue 页面有所不同，可能会导致 scoped 样式无法完全生效，从而影响到子组件中的元素。

解决方案

1. 使用深度选择器
   如果你希望 scoped 样式只作用于当前组件，而不影响子组件，可以使用深度选择器 ::v-deep 或 /deep/ 来明确指定样式的应用范围。

   /* 使用 ::v-deep */
   ::v-deep .my-class {
     color: red;
   }
   
   /* 或者使用 /deep/ */
   /deep/ .my-class {
     color: red;
   }
   

2. 使用全局样式
   如果你希望样式能够影响到子组件，可以将样式定义为全局样式，而不是 scoped 样式。

   /* 全局样式 */
   .my-class {
     color: red;
   }
   

3. 使用 style 标签的 scoped 属性
   确保在 style 标签中正确使用了 scoped 属性，以避免样式泄漏到子组件。

   <style scoped>
   .my-class {
     color: red;
   }
   </style>
   

4. 使用 uni-app 提供的样式隔离机制
   uni-app 提供了一些样式隔离机制，可以在 nvue 页面中使用 style 标签的 scoped 属性，或者使用 uni-app 提供的 class 前缀来避免样式冲突。

   <style scoped>
   .my-class {
     color: red;
   }
   </style>