html5自定义组件样式,Taro 自定义组件样式不生效及解决方案

一、问题

页面功能太多，想分成多个自定义组件，结果发现自定义组件样式不生效。

二、解决办法(个人推荐第三种)

第一种：外部样式类

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

/* CustomComp.js */

export default class CustomComp extends Component {

static externalClasses = ['my-class']

render () {

return 这段文本的颜色由组件外的 class 决定

}

}

/* MyPage.js */

export default class MyPage extends Component {

render () {

return

}

}

/* MyPage.scss */

.red-text {

color: red;

}

缺点：

1、自定义组件里面的每一个className都需要在externalClasses里面定义，然后才能使用；

2、不能使用 id 选择器(#a)、属性选择器([a])和标签名选择器等多种写法限制；

第二种：使用 CSS Modules(通过引入样式变量的方式添加className，哪里需要就在哪里引用即可)

import Taro, { Component } from '@tarojs/taro'import { View