微信小程序的组件样式

1、外部样式类

有时，组件希望接受外部传入的样式类（类似于 view 组件的 hover-class 属性）。此时可以在 Component 中用 externalClasses 定义若干个外部样式类。这个特性从小程序基础库版本 1.9.90 开始支持。

注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。

代码示例：

// 第一步：components/music/index.js
Component({
  externalClasses: ['my-class'] // 定义外部样式类
})

<!--第二步：components/music/index.wxml-->
<view class="my-class">
  <text>这段文本的颜色由组件外的 class 决定</text>
</view>

<!--第三步：pages/index/index.wxml-->
<f-music my-class="red-text"></f-music>

/* 第四步：pages/index/index.wxss */
.red-text {
  color: red;
}

2、全局样式类

使用外部样式类可以让组件使用指定的组件外样式类，如果希望组件外样式类能够完全影响组件内部，可以将组件构造器中的options.addGlobalClass字段置为true。这个特性从小程序基础库版本 2.2.3 开始支持。

注意：当开放了全局样式类，存在外部样式污染组件样式的风险，请谨慎选择。

代码示例：

// 第一步：components/music/index.js
Component({
  options: {
    addGlobalClass: true // 组件外部定义的class可以影响到组件里面样式
  }
})

<!--第二步：components/music/index.wxml-->
<view class="red-text">
  <text>组件外定义的“red-text”会影响这段文本的颜色</text>
</view>

<!--第三步：pages/index/index.wxml-->
<f-music></f-music>

/* 第四步：pages/index/index.wxss */
.red-text {
  color: red;
}

End