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;
}
           

外部樣式類

/* 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;
}
           

全局樣式類

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

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