taro 组件的外部样式和全局样式
- 自定义组件对应的样式文件,只对该组件内的节点生效。
编写组件样式时,需要注意以下几点:
- 组件和引用组件的页面不能使用 id 选择器(#a)、属性选择器([a])和标签名选择器,请改用 class 选择器。
- 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
- 子元素选择器(.a>.b)只能用于 View 组件与其子节点之间,用于其他组件可能导致非预期的情况。
- 继承样式,如 font 、 color ,会从组件外(父组件)继承到组件内。但是引用组件时在组件节点上书写的 className 无效。 (具体解决方案请参见下面的外部和全局样式介绍。)
- 除继承样式外, app.scss 中的样式、组件所在页面的样式,均对自定义组件无效。
除此以外,组件可以指定它所在节点的默认样式,使用 :host 选择器(需要包含基础库 1.7.2 或更高版本的开发者工具支持)。
/* 该自定义组件的默认样式 */
:host {
color: yellow;
}
外部样式类
如果想传递样式给引用的自定义组件,需要利用 externalClasses 定义段定义若干个外部样式类。这个特性从小程序基础库版本 1.9.90 开始支持。
/* CustomComp.js */
export default CustomComp extends Component {
static externalClasses = ['my-class']
render () {
return <View className="my-class">这段文本的颜色由组件外的 class 决定</View>
}
}
/* MyPage.js */
export default MyPage extends Component {
render () {
return <CustomComp my-class="red-text" />
}
}
/* MyPage.scss */
.red-text {
color: red;
}
注意:externalClasses 需要使用 短横线命名法 (kebab-case),而不是 React 惯用的 驼峰命名法 (camelCase)。否则无效。
全局样式类
使用外部样式类可以让组件使用指定的组件外样式类,如果希望组件外样式类能够完全影响组件内部,可以将组件构造器中的 options.addGlobalClass 字段置为 true。这个特性从小程序基础库版本 2.2.3 开始支持。
/* CustomComp.js */
export default CustomComp extends Component {
static options = {
addGlobalClass: true
}
render () {
return <View className="red-text">这段文本的颜色由组件外的 class 决定</View>
}
}
/* 组件外的样式定义 */
.red-text {
color: red;
}
taro 组件的外部样式和全局样式的更多相关文章
- 关于微信小程序中组件和页面对全局样式的继承性
1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- styled-components解决全局样式'injectGlobal' 废除的问题
最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...
- 小程序里的自定义组件:组件的外部样式externalClasses的使用
启用外部样式: 自定义组件: v-tag 在html 引入 在组件写外部样式的css : .ex-tag { background-color: #fffbdd ; } 在组件使用该外部的样式 这个时 ...
- vue文件引入全局样式导致样式重复
通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ...
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式
全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...
随机推荐
- SharePoint REST API - 基本操作(一)
博客地址:http://blog.csdn.net/FoxDave 本文讲述如何应用SharePoint的REST接口完成基本的增删查改操作. 使用SharePoint客户端API和REST服务进 ...
- Unity项目中的资源管理
这是我在2017金山技术开放日分享的部分内容.从贴图资源格式配置的介绍开始,引申出资源配置工具,最后再谈谈一整套项目资源管理方案.在GitHub上可以获取到资源配置工具的代码,是基于下面理念的一份简单 ...
- 六、在U-boot中让LCD填充纯色
1. 编译U-boot 准备好U-boot压缩包urbetter-u-boot-1.1.6-v1.0.tgz,输入命令:tar -xvf urbetter-u-boot-1.1.6-v1.0.tgz ...
- 位(bit)、字节(Byte)、MB(兆位)之间的换算关系
B是Byte的缩写,意思是字节:b是bit的缩写,意思是比特位:Kb是千比特位,KB是千字节:MB意思是兆字节: 换算关系: 1MB=1024KB=1024B*1024=1048576B: 8bit= ...
- uwsgi理解
uwsgi uWSGI 是一个 Web 服务器,它实现了 WSGI 协议.uwsgi.http 等协议.Nginx 中HttpUwsgiModule 的作用是与 uWSGI 服务器进行交换.WSGI ...
- 【Python】多进程-4
#练习:用event事件控制进程执行顺序,下面例子中,主进程main函数在创建了子进程之后,依然会往下执行,所以会出现主进程先打印出来的情况 import multiprocessing import ...
- 【Python】进程-控制块
一.进程控制块 PCB (Process Control Block): 存放进程的管理和控制信息的数据结构称为进程控制块.它是进程管理和控制的最重要的数据结构,每一个进程均有一个PCB,在创建进程时 ...
- 【转】C++类内存分布
C++类内存分布 https://www.cnblogs.com/jerry19880126/p/3616999.html 书上类继承相关章节到这里就结束了,这里不妨说下C++内存分布结构,我们来看 ...
- Gym102040 .Asia Dhaka Regional Contest(寒假自训第9场)
B .Counting Inversion 题意:给定L,R,求这个区间的逆序对数之和.(L,R<1e15) 思路:一看这个范围就知道是数位DP. 只是维护的东西稍微多一点,需要记录后面的各种数 ...
- PTA——猴子吃桃
PTA 7-35 猴子吃桃问题 #include<stdio.h> int main() { ; scanf("%d",&n); ; i<n; i++) ...