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)。否则无效。