微信小程序——外部样式类-父组件修改子组件样式

本文链接：https://blog.csdn.net/weixin_44593720/article/details/117281253

在开发的过程中，我定义了一个公共组件，但在我的设计稿上面，这个公共组件距离内容的margin-bottom是不同的，所以我需要在父组件引用这个组件的时候，在父组件的css中设置他的样式，查阅小程序文档，找到了外部样式，使用方式如下：

子组件定义被外部使用类

子组件wxml：wxml中定义将要被外部使用的class名称  my-class

<view class="activityPrivilege my-class">
  <image class="activityPrivilege-icon" mode="aspectFill" src="../../assets/common/huangguan.png" />
</view>

子组件js:js文件中将这个类定义为外部样式类 
Component({
  externalClasses:['my-class'],    // 注意：我曾经不小心在my-class前面中混入了一个空格，找问题找了好久，希望你不要走我的老路
  ...

将子组件可以注册为全局组件或某个页面专属组件

若想设置为全局组件   app.json
若想设置为某个页面组件  xxx.json

  "usingComponents": {
    "t-activityPrivilege":"/components/ActivityPrivilege/ActivityPrivilege"
  },

父组件中使用子组件的外部样式类

父组件wxml:在父组件wxml中，直接使用这个类名替换class

<t-activityPrivilege my-class="aaa"/>

父组件wxss中，定义新的内容aaa

.aaa{
  margin-bottom: 24px;
  background-color: hotpink;
}

注意：当父组件和子组件对于同一属性进行定义时，子组件样式的优先级较高。