uniapp vue3 deep 深度选择器不生效的问题

在使用uni扩展组件时需要定义组件样式发现深度选择器有问题

百度百度百度然后就发现解决方法添加options里定义styleIsolation

export default {
   options: {
         //微信小程序属性 styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值:
         styleIsolation: 'shared'
   },
   ...other
}

然后就可以

:deep().classname {
    color: red;
}

参考微信组件样式隔离相关文档说明

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值:

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

Avatar photo
About the Author:
记录生活点滴

Related Posts