taro开发小程序遇到的问题

1、使用 Taro 开发微信小程序的时候，样式不生效

1.1 全局样式类

在Dining.js文件内设置 addGlobalClass: true

/*Dining.js文件*/
import Taro, { Component } from '@tarojs/taro';
import { connect } from '@tarojs/redux';
import './index.less';

class Dining extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.config = {
		navigationBarTitleText: '首页',
    };
  }
  
  static options = { addGlobalClass: true }

  render() {
    return (
      <View className='dining-wrapper'></View >
    )
  }
}

function mapPropsStatus({ service }) {
  return { service }
}
export default connect(mapPropsStatus)(Dining);

1.2 externalClasses 定义若干个外部样式类

利用externalClasses 定义段定义若干个外部样式类

//定义组件CustomComp 
class CustomComp extends Component {
  static externalClasses = ['my-class']

  render () {
    return <View className="my-class">这段文本的颜色由组件外的 class 决定</View>
  }
}
export default CustomComp;


//调用组件CustomComp
class MyPage extends Component {
  render () {
    return <CustomComp my-class="red-text" />
  }
}
export default MyPage;

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

注意：externalClasses 需要使用 短横线命名法 (kebab-case)，而不是 React 惯用的 驼峰命名法 (camelCase)。否则无效。