组件样式隔离
1 人关注该话题
一个Vue页面中使用了引用了两个不同的组件。样式互相冲突 组件样式隔离 uniapp
蔡cai 2025-01-09 09:11 回复问题 • 2 人关注 • 2 个回复 • 142 次浏览
Uniapp中如何设置微信小程序自定义组件的options.styleIsolation？（为了能修改自定义组件样式） 微信小程序 组件样式隔离
Georgeline 2023-06-15 15:50 回复问题 • 11 人关注 • 8 个回复 • 16159 次浏览
样式赋值得时候 ，第二遍会没赋值上去-webkit-mask-size:100% 组件样式隔离
缄默小宝 2022-12-08 16:34 发起问题 • 1 人关注 • 0 个回复 • 416 次浏览
pages页面的样式编译 在App和H5之间存在差异 组件样式隔离
林逸舟 2022-02-14 10:53 回复问题 • 2 人关注 • 2 个回复 • 348 次浏览
【报Bug】uniapp中的 wxcomponents 的样式无法隔离？ bug反馈 组件样式隔离 微信小程序
DCloud_UNI_LXH 2021-01-30 15:47 回复问题 • 1 人关注 • 1 个回复 • 1320 次浏览
uniapp微信小程序怎样修改子组件css样式 组件样式隔离 微信小程序
DCloud_UNI_LXH 2021-01-30 15:47 回复问题 • 5 人关注 • 5 个回复 • 8852 次浏览
1. 页面样式可穿透组件，如 .box
2. 页面使用 important 可覆盖组件样式
3. 父组件不能穿透子组件
4. 父组件设置 options.styleIsolation 可穿透子组件，以及页面
```javascript
exp... 显示全部 »
1. 页面样式可穿透组件，如 .box
2. 页面使用 important 可覆盖组件样式
3. 父组件不能穿透子组件
4. 父组件设置 options.styleIsolation 可穿透子组件，以及页面
```javascript
export default {
options: { styleIsolation: 'shared' }
}
```
# 附测试截图：
1. 页面样式可穿透组件
** 插入的附件 **
2. 页面使用 important 可覆盖组件样式
** 插入的附件 **
3. 父组件不能穿透子组件
** 插入的附件 **
4. 父组件设置 options.styleIsolation 可穿透子组件，以及页面
** 插入的附件 **
详见https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin
详见https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin
赞同来自: DCloud_UNI_JBB
```javascript
<script lang="ts" setup>
defineOptions({
options: {
styleIsolation: "shared",... 显示全部 »
```javascript
<script lang="ts" setup>
defineOptions({
options: {
styleIsolation: "shared",
},
});
</script>
```
然后在 :deep() 中使用 !important 覆盖样式，可以在微信开发者工具中查看覆盖样式是否出现
在wot-ui组件样式中，wot内部组件class优先于自定义的custom-class，例如 .wot-input，如果 custom-class 不生效，应该使用 :deep(.wot-input){} 进行精准覆盖
引用自：[为什么在组件中无法覆盖组件库样式？](https://wot-ui.cn/guide/common-problems.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%97%A0%E6%B3%95%E8%A6%86%E7%9B%96%E7%BB%84%E4%BB%B6%E5%BA%93%E6%A0%B7%E5%BC%8F)
