Taro⾃定义组件样式不⽣效及解决⽅案⼀、问题
  页⾯功能太多，想分成多个⾃定义组件，结果发现⾃定义组件样式不⽣效。
⼆、解决办法（个⼈推荐第三种）
  第⼀种：外部样式类
  利⽤ externalClasses 定义段定义若⼲个外部样式类实现
/* 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;
}
css 属性选择器
  缺点：
    1、⾃定义组件⾥⾯的每⼀个className都需要在externalClasses⾥⾯定义，然后才能使⽤；
    2、不能使⽤ id 选择器（#a）、属性选择器（[a]）和标签名选择器等多种写法限制；
  第⼆种：使⽤ CSS Modules（通过引⼊样式变量的⽅式添加className，哪⾥需要就在哪⾥引⽤即可）
import Taro, { Component } from'@tarojs/taro'
import { View, Text } from'@tarojs/components'
import styles from'./dule.scss'
export default class Test extends Component {
constructor(props) {
super(props)
this.state = { }
}
render () {
return (
<View className={st}>
<Text className={}>Hello world!</Text>
</View>
)
}
}
  Taro 中内置了  的⽀持，但默认是关闭的，如果需要开启使⽤，请先在中添加如下配置　
  根⽬录下的config/index.js:
/
/ ⼩程序
mini: {
postcss: {
// css modules 功能开关与相关配置
cssModules: {
enable: true, // 默认为 false，如需使⽤ css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module，下⽂详细说明
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
// h5
h5: {
postcss: {
// css modules 功能开关与相关配置
cssModules: {
enable: true, // 默认为 false，如需使⽤ css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module，下⽂详细说明
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
  需要注意⽂件取名需要在中间加上 .module.  ，因为namingPattern配置的'module'模式，只有⽂件名中包含 .module. 的样式⽂件会经过 CSS Modules 转换处理。
  缺点：如果项⽬中引⽤了taroUI，发现部分taroUI样式失效了，⽽且不能通过样式覆盖的⽅式⾃定义样式了。
  第三种：全局样式类
  希望组件外样式类能够完全影响组件内部，可以将组件构造器中的 options.addGlobalClass 字段置为 true。（只需要在⾃定义组件添加  static options = {addGlobalClass: true}；⽗页⾯的样式就能作⽤到⾃定义组件。）
/* CustomComp.js */
export default class CustomComp extends Component {
static options = {
addGlobalClass: true
}
render () {
return <View className="red-text">这段⽂本的颜⾊由组件外的 class 决定</View>
}
}
/* 组件外的样式定义 */
.red-text {
color: red;
}
  全局样式虽然可能造成不同页⾯样式⼲扰，但只要在最外层起个不⼀样命名空间，还是很容易就能避免这种失误的，相对⽽⾔，全局样式类书写⽅便，效果最佳。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。