Cherise
Cherise
  • 发布:2019-06-28 18:00
  • 更新:2023-06-15 15:50
  • 阅读:14328

Uniapp中如何设置微信小程序自定义组件的options.styleIsolation?(为了能修改自定义组件样式)

分类:uni-app

开发微信小程序项目,无法在页面中设置自定义组件的样式,官方文档要求设置 styleIsolation 才可开放自定义组件的外部设置;请问在uniapp项目中该如何添加这个设置?

微信小程序开发文档:组件样式隔离

找了各种资料,做了各种尝试都不行;如果有知道的小伙伴们麻烦告知下,谢谢!!

2019-06-28 18:00 负责人:无 分享
已邀请:

最佳回复

hobeas

hobeas

经测试:

  1. 页面样式可穿透组件,如 .box
  2. 页面使用 important 可覆盖组件样式
  3. 父组件不能穿透子组件
  4. 父组件设置 options.styleIsolation 可穿透子组件,以及页面
export default {  
  options: { styleIsolation: 'shared' }  
}

附测试截图:

  1. 页面样式可穿透组件

  1. 页面使用 important 可覆盖组件样式

  1. 父组件不能穿透子组件

  1. 父组件设置 options.styleIsolation 可穿透子组件,以及页面

liamwang

liamwang

uni-app 社区问答响应和 taro 没得比。能不能得到uni-app团队的解答就看你运气了。

1***@qq.com

1***@qq.com

现在都是uniapp + ts 来写了,
options: {
styleIsolation: 'shared'
}
想问的是使用vue 组合式API来写的时候,怎么配置
options
如下面代码

<script lang="ts" setup>

</script>

  • z***@outlook.com

    大哥解决了吗??

    2022-12-14 15:33

  • 1***@qq.com

    回复 z***@outlook.com: 有人说这么写有效,你可以试试,我还没试过,写全局统一样式了

    2023-01-03 14:11

  • 1***@qq.com

    回复 z***@outlook.com:

    <script lang="ts" setup>

    ....

    </script>

    <script lang="ts">

    export default {

    options: {

    // 微信小程序中 options 选项

    multipleSlots: true, // 在组件定义时的选项中启动多slot支持,默认启用

    styleIsolation: 'shared', // 启动样式隔离。当使用页面自定义组件,希望父组件影响子组件样式时可能需要配置。具体配置选项参见:微信小程序自定义组件的样式

    addGlobalClass: true, // 表示页面样式将影响到自定义组件,但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared

    virtualHost: true // 将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定

    }

    }

    </script>

    2023-01-03 14:11

  • 1***@qq.com

    回复 z***@outlook.com: 再加个script 标签

    2023-01-03 14:11

2***@qq.com

2***@qq.com

同问,不能设置取消组件样式隔离的话,做多端应用时h5和小程序的组件样式要时刻注意区别,好烦。

专业逮虾户aaa

专业逮虾户aaa - 喜欢分享创新和实用性强的想法

export default {  
    options: {  
        styleIsolation: 'shared'  
    }  
}

你给出的小程序官方文档不是有这个配置吗?在两个组件中,同时加上这个配置,那么你的两个组件中穿透就能生效。如果不加这个配置,就只能在使用组件的pages中穿透。
穿透的话,如果是使用scss的就用/deep/,如果是css的就用>>>。这个用法具体见vue的官方的风格指南

  • 2***@qq.com

    在uniapp中好像不行, 能否给个demo

    2020-06-08 14:19

  • 2***@qq.com

    问题是uni-app没有给出这个配置啊

    2020-06-17 17:59

1***@163.com

1***@163.com

赞,我在小程序可以了

j***@163.com

j***@163.com

通过uniapp开发钉钉小程序也遇到类似问题,钉钉小程序不支持这个属性,直接导致所有自定义组件内部样式失效了,然后问了钉钉技术同学,回复是不支持,需要把这个属性删掉,但是在uniapp不知道如何配置删掉这个属性

  • Georgeline

    我知道在哪里删除,当前components json 里面,有个"styleIsolation": "apply-shared",删除可以,但是uniapp 不知道在哪里删除

    2023-06-15 15:52

  • Georgeline

    回退版本试试,你现在是多少 ,回退到。3.5.4 重新运行一下试试,有问题在留言

    2023-06-16 14:14

  • j***@163.com

    回复 Georgeline: 是的,目前打算在编译后的小程序里全局删除这个属性,但是更期望能在uniapp里面有相关配置可支持

    2023-06-21 13:45

  • j***@163.com

    回复 Georgeline: 降低版本之后确实可以了 谢谢

    2023-06-25 19:29

  • 1***@163.com

    回复 j***@163.com你好解决了吗,是HBuilderX版本退回到3.5.4吗:

    2023-06-30 11:13

Georgeline

Georgeline

通过uniapp开发钉钉小程序也遇到类似问题,钉钉小程序不支持这个属性,直接导致所有自定义组件内部样式失效了,然后问了钉钉技术同学,回复是不支持,需要把这个属性删掉,但是在uniapp不知道如何配置删掉这个属性,同问?

要回复问题请先登录注册