uniapp /deep/設(shè)置子組件樣式 h5生效，小程序失效問題解決

發(fā)表時(shí)間：2020-10-19

發(fā)布人：葵宇科技

瀏覽次數(shù)：418

uniapp /deep/設(shè)置子組件樣式 h5生效，小程序失效問題解決

本項(xiàng)目是用typescript搭建的uniapp項(xiàng)目，使用vue-property-decorator裝飾器
在父組件內(nèi)設(shè)置子組件的樣式代碼如下

<style lang="scss" scoped>
.device-panel {
    /deep/ .cc-icon {
        font-size: 70rpx !important;
    }
}

但是只在H5生效，在小程序失效，解決辦法如下
微信文檔https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
中提到需要設(shè)置styleIsolation屬性為shared，才能影響到子組件的樣式
在代碼中增加options選項(xiàng)，增加styleIsolation屬性，設(shè)置為shared

@Component({
    components: {
        CcSwitch,
        CcIcon,
    },
    options: { styleIsolation: 'shared' },
})

但是這樣typescript編譯報(bào)錯(cuò)
and ‘options’ does not exist in type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<…>> & ThisType<…>
原因是options這個(gè)選項(xiàng)ComponentOptions里面沒有，目前暫時(shí)沒找到方法解決，后續(xù)找到方法會(huì)繼續(xù)跟進(jìn)的

如果很在意這個(gè)報(bào)錯(cuò)建議用Vue.extends的寫法