taro 組件的外部樣式和全局樣式

• 自定義組件對應的樣式文件，只對該組件內的節點生效。

編寫組件樣式時，需要注意以下幾點：

1. 組件和引用組件的頁面不能使用 id 選擇器（#a）、屬性選擇器（[a]）和標簽名選擇器，請改用 class 選擇器。
2. 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預期的表現，如遇，請避免使用。
3. 子元素選擇器（.a>.b）只能用於 View 組件與其子節點之間，用於其他組件可能導致非預期的情況。
4. 繼承樣式，如 font 、 color ，會從組件外（父組件）繼承到組件內。但是引用組件時在組件節點上書寫的 className 無效。 （具體解決方案請參見下面的外部和全局樣式介紹。）
5. 除繼承樣式外， app.scss 中的樣式、組件所在頁面的樣式，均對自定義組件無效。

除此以外，組件可以指定它所在節點的默認樣式，使用 :host 選擇器（需要包含基礎庫 1.7.2 或更高版本的開發者工具支持）。

/* 該自定義組件的默認樣式 */
:host {
  color: yellow;
}

外部樣式類

如果想傳遞樣式給引用的自定義組件，需要利用 externalClasses 定義段定義若干個外部樣式類。這個特性從小程序基礎庫版本 1.9.90 開始支持。

/* CustomComp.js */
export default CustomComp extends Component {
  static externalClasses = ['my-class']

  render () {
    return <View className="my-class">這段文本的顏色由組件外的 class 決定</View>
  }
}
/* MyPage.js */
export default MyPage extends Component {
  render () {
    return <CustomComp my-class="red-text" />
  }
}
/* MyPage.scss */
.red-text {
  color: red;
}

注意：externalClasses 需要使用 短橫線命名法 (kebab-case)，而不是 React 慣用的 駝峰命名法 (camelCase)。否則無效。

全局樣式類

使用外部樣式類可以讓組件使用指定的組件外樣式類，如果希望組件外樣式類能夠完全影響組件內部，可以將組件構造器中的 options.addGlobalClass 字段置為 true。這個特性從小程序基礎庫版本 2.2.3 開始支持。

/* CustomComp.js */
export default CustomComp extends Component {
  static options = {
    addGlobalClass: true
  }

  render () {
    return <View className="red-text">這段文本的顏色由組件外的 class 決定</View>
  }
}
/* 組件外的樣式定義 */
.red-text {
  color: red;
}