uniapp vue3 组件样式不生效

uniapp 小程序中组件样式不生效主要有两种情况,第一种是在页面中引入组件,第二种是在组件中引入组件
1.页面中引入组件,由于引入的组件中添加了scoped属性,class会带了一个hash,用来防止样式冲突,页面中改变组件样式需要使用深度选择器,不同预编译css语言略有差异,同时组件样式选择器级别可能比较深,可以用!important

 组件 Father
 组件内容 <view class="header"> </view>
 
 页面  PageA
 <view class="pageAWrapper">
   <Father></Father>
 </view>
 <style>
     .pageAWrapper :deep(.header){
         background:red !important;
    }
 </style>
 

2.小程序组件修改子组件的样式的话,多了一些特殊配置,styleIsolation: 'shared'.若是在组合式API中,则直接添加如下内容.若不生效注意选择层级

<script>
export default {
    options: {
        styleIsolation: 'shared', // 解除样式隔离
    },
};
</script>