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 ...
随机推荐
- IBM MQ 集成CXF 发送JMS 消息
0.POM依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
- 网站如何实现 在qq中发自己链接时,便自动获取链接标题、图片和部分内容
如何实现像这种效果?答案如下(要采用分享的形式,复制链接有可能会实现不了效果,至少我的测试是这样的) <head>标签内有QQ专有的标签可以控制要注意QQ的缓存机制,对同一个链接,修改后可 ...
- SharePoint Framework 企业向导(一)
博客地址:http://blog.csdn.net/FoxDave 简介 SharePoint Framework(SPFx)是一个新的SharePoint用户接口扩展的开发模型,它用来补充现有的 ...
- java.lang.Runnable 源码分析
子接口:RunnableFuture<V>, RunnableScheduledFuture<V> 实现类:AsyncBoxView.ChildState, ForkJoinW ...
- rgba 和 opacity 的对比.
rgba 中 的 a 指的是透明度: 1. rgba 的 设置的 透明度 不会被子级 元素继承; opacity 设置的透明度会被子级元素继承 . 因此 ,有时候 使用 rgba 会比 opa ...
- centos6.6安装hadoop-2.5.0(四、hadoop HA安装)
操作系统:centos6.6 环境:selinux disabled:iptables off:java 1.8.0_131 安装包:hadoop-2.5.0.tar.gz HA模式下的HADOOP完 ...
- python day04作业
- linux 编译链接问题
-rpath和-rpath-link 假设有3个文件,在同一目录下,有这样的依赖关系 test->liba.so->libd.so 如果编译test的时候这样写 gcc test.c –l ...
- 【c++基础】static修饰的函数作用与意义
static修饰的函数作用与意义 static修饰的函数叫做静态函数,静态函数有两种,根据其出现的地方来分类: 如果这个静态函数出现在类里,那么它是一个静态成员函数: 静态成员函数的作用在于:调用这个 ...
- Django中的应用
1.什么是应用 应用就是网站中的一个独立的程序模块,在Django中,主目录一般不处理具体的请求,主目录一般要处理的是项目的初始化操作以及请求的分发(分布式请求处理).而具体的请求是由各个应用去处理. ...