【小程序】自定义组件设置样式失效使用外部样式类解决

文章目录

1 问题描述

在小程序中编写了自定义的组件，用来展示 图片+文字 的效果，但是在第二处展示时，想要修改图片的大小。直接在pageA(调用自定义组件的文件)中为componentB(自定义的组件)添加class失效。

2 使用外部样式类

外部样式类：自身不去实现这个class类，由使用它的 页面来写。

想要实现如下效果:

<!--componentB--><view class="show-img"><image class="f-class1 f-class2" src="/images/mef.jpeg"></image><text class="show-box-text">马尔福</text></view>

Component({//componentBexternalClasses: ['f-class1','f-class2'],})

<!--pageA--><view><view class="home-showimge"><componentB f-class1="show-box-img"/><componentB f-class1="show-box-img"/></view><view class="home-class-books"><componentB f-class2="home-classbooks-show"/></view></view>

.show-box-img{width: 325rpx;height: 200rpx;}.home-classbooks-show{width: 200rpx;height: 200rpx;}