一、问题

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

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

第一种：利用 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, Text } from '@tarojs/components'

import styles from './Test.module.scss'

export default class Test extends Component {

constructor(props) {

super(props)

this.state = { }

}

render () {

return (

Hello world!

)

}

}

Taro 中内置了 CSS Modules 的支持，但默认是关闭的，如果需要开启使用，请先在编译配置中添加如下配置

根目录下的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 转换处理。

标签：taro,自定义,modules,module,组件,Taro,class,css

来源： https://www.cnblogs.com/yang-shun/p/12592318.html