uniapp /deep/设置子组件样式 h5生效，小程序失效问题解决

uniapp /deep/设置子组件样式 h5生效，小程序失效问题解决本项目是用typescript搭建的uniapp项目，使用vue-property-decorator装饰器在父组件内设置子组件的样式代码如下<style lang="scss" scoped>.device-panel {/deep/ .cc-icon {font-size: 70rpx !important;}

qq_15006083

8467人浏览 · 2020-09-21 11:04:22

qq_15006083 · 2020-09-21 11:04:22 发布

uniapp /deep/设置子组件样式 h5生效，小程序失效问题解决

本项目是用typescript搭建的uniapp项目，使用vue-property-decorator装饰器
在父组件内设置子组件的样式代码如下

<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
中提到需要设置styleIsolation属性为shared，才能影响到子组件的样式
在代码中增加options选项，增加styleIsolation属性，设置为shared

// @ts-ignore
@Component({
    components: {
        CcSwitch,
        CcIcon,
    },
    options: { styleIsolation: 'shared' },
})

但是这样typescript编译报错
and ‘options’ does not exist in type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<…>> & ThisType<…>
原因是options这个选项ComponentOptions里面没有，解决办法是忽略ts语法检查 // @ts-ignore