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

自定義組件對(duì)應(yīng)的樣式文件，只對(duì)該組件內(nèi)的節(jié)點(diǎn)生效。編寫組件樣式時(shí)，需要注意以下幾點(diǎn)：

• 組件和引用組件的頁面不能使用 id 選擇器（#a）、屬性選擇器（[a]）和標(biāo)簽名選擇器，請(qǐng)改用 class 選擇器。
• 組件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會(huì)有非預(yù)期的表現(xiàn)，如遇，請(qǐng)避免使用。
• 子元素選擇器（.a > .b）只能用于 View 組件與其子節(jié)點(diǎn)之間，用于其他組件可能導(dǎo)致非預(yù)期的情況。
• 繼承樣式，如 font 、 color ，會(huì)從組件外（父組件）繼承到組件內(nèi)。但是引用組件時(shí)在組件節(jié)點(diǎn)上書寫的 className 無效。 （具體解決方案請(qǐng)參見下面的外部和全局樣式介紹。）
• 除繼承樣式外， app.scss 中的樣式、組件所在頁面的樣式，均對(duì)自定義組件無效。

#a { } /* 在組件中不能使用 */
[a] { } /* 在組件中不能使用 */
button { } /* 在組件中不能使用 */
.a > .b { } /* 除非 .a 是 view 組件節(jié)點(diǎn)，否則不一定會(huì)生效 */

除此以外，組件可以指定它所在節(jié)點(diǎn)的默認(rèn)樣式，使用 :host 選擇器（需要包含基礎(chǔ)庫 1.7.2 或更高版本的開發(fā)者工具支持）。

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

外部樣式類

如果想傳遞樣式給引用的自定義組件，以下寫法（直接傳遞 className）不可行：

/* CustomComp.js */
export default class CustomComp extends Component {
  static defaultProps = {
    className: ''
  }

  render () {
    return <View className={this.props.className}>這段文本的顏色不會(huì)由組件外的 class 決定</View>
  }
}

/* MyPage.js */
export default class MyPage extends Component {
  render () {
    return <CustomComp className="red-text" />
  }
}

/* MyPage.scss */
.red-text {
  color: red;
}

取而代之的，需要利用 externalClasses 定義段定義若干個(gè)外部樣式類。這個(gè)特性從小程序基礎(chǔ)庫版本 1.9.90 開始支持。

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

  render () {
    return <View className="my-class">這段文本的顏色由組件外的 class 決定</View>
  }
}

/* MyPage.js */
export default class MyPage extends Component {
  render () {
    return <CustomComp my-class="red-text" />
  }
}

/* MyPage.scss */
.red-text {
  color: red;
}

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

全局樣式類

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

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

  render () {
    return <View className="red-text">這段文本的顏色由組件外的 class 決定</View>
  }
}

/* 組件外的樣式定義 */
.red-text {
  color: red;
}