taro初試遇到的坑

樣式問題

樣式在H5頁面生效 在小程序不生效

原因：

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

解決方案：

1、組件可以指定它所在節點的默認樣式，使用 :host 選擇器。只需要在樣式文件中輸入該選擇器

/* 該自定義組件的默認樣式 */ 
:host {
 color: red; 
 font-weight: bold; 
 font-size: 30PX; 
}

2.externalClasses 定義若干個外部樣式類

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

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

CustomComp.js 
export default class CustomComp extends Component { 
  static externalClasses = ['my-class'] 
  render () { 
    return <View className="my-class">這段文本的顏色由組件外的 class 決定</View>   
  } 
}

對於函數式組件

export default function CustomComp (props){ 
   CustomComp.externalClasses = ['my-class'] 
   render () { 
      return <View className="my-class">這段文本的顏色由組件外的 class 決定</View> 
   } 
} 

//注意：externalClasses 需要使用 短橫線命名法 (kebab-case)

 

3 全局樣式類

如果希望組件外樣式類能夠完全影響組件內部嗎可以將組件構造器中的options.addGlobalClass 字段置爲 true

CustomComp.js 
export default class CustomComp extends Component { 
   static options = { addGlobalClass: true } 
   render () { 
      return <View className="red-text">這段文本的顏色由組件外的 class 決定</View> 
   } 
}