标签:taro 自定义 modules module 组件 Taro class css
一、问题
页面功能太多,想分成多个自定义组件,结果发现自定义组件样式不生效。
二、解决办法(推荐第二种)
第一种:利用 externalClasses
定义段定义若干个外部样式类实现(不推荐,写法累赘繁琐,可忽略)
链接:https://taro-docs.jd.com/taro/docs/component-style.html
/* 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; }
缺点:
1、自定义组件里面的每一个className都需要在externalClasses里面定义,然后才能使用;
2、不能使用 id 选择器(#a
)、属性选择器([a]
)和标签名选择器等多种写法限制;
第二种:使用 CSS Modules(通过引入样式变量的方式添加className,哪里需要就在哪里引用即可)
链接:https://taro-docs.jd.com/taro/docs/css-modules.html
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 ( <View className={styles.test}> <Text className={styles.txt}>Hello world!</Text> </View> ) } }
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
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。