小程序组件引用外部样式

• 引用外部样式使用场景：
  • 一个写好的自定义组件，通常会有自己的默认样式，但我们在页面中使用它的时候，可能会有样式上的修改需求，这种情况下我们可以使用引用外部样式的方式来实现。 ❤️（当然也可以在父组件中用层级选择器直接修改，简单粗暴，但如果考虑到组件的公用性，或写一些UI库时，一定要用外部引入的方法。）
• 使用方法：
  • 在父组件中定义好样式和类名，传递给子组件，子组件使用externalClasses进行接收外部样式，从而在wxml中使用接收到的类名。

举个?：

父组件中定义传递样式：

<view class="comment-container">
   <!-- ex-tag为传递给子组件中的样式类名 -->
   <v-tag tag-class="ex-tag" text="{{ item.content }}" />
</view>

在父组件中定义样式：

/* 外部样式传入的方式--在写UI库的时候一定要用此方式 */
.ex-tag{
  background-color:#fffbdd !important; // 加important是为了提高权重，覆盖子组件的默认样式
}

在自定义组件中接收样式：

Component({
  /**
   * 组件的属性列表
   */
  externalClasses: ['tag-class'], // 接收外部传入的样式 
  properties: { // 开放数据
    text: String
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

在自定义组件中使用：

<!-- tag-class为外部传来的样式类名 -->
<view class="container tag-class">
  <text>{{ text }}</text>
</view>

注： 当子组件存在一个默认样式类的时候，后边再写外部传入的样式类，组件的样式是得不到覆盖的，这与普通的web页面样式类有所区别，所以如果想让外部传入的样式，覆盖默认的样式，可以提升样式的权重，给传入样式加上 “!important” 即可。