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

分类：uni-app

微信小程序组件样式隔离

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

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

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

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

8 个回复

最佳回复

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

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

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

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

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

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

赞，我在小程序可以了

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

</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

通过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