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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值