• 自定义组件对应的样式文件,只对该组件内的节点生效。

编写组件样式时,需要注意以下几点:

  1. 组件和引用组件的页面不能使用 id 选择器(#a)、属性选择器([a])和标签名选择器,请改用 class 选择器。
  2. 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
  3. 子元素选择器(.a>.b)只能用于 View 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  4. 继承样式,如 font 、 color ,会从组件外(父组件)继承到组件内。但是引用组件时在组件节点上书写的 className 无效。 (具体解决方案请参见下面的外部和全局样式介绍。)
  5. 除继承样式外, 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. 关于微信小程序中组件和页面对全局样式的继承性

    1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式

  2. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  3. styled-components解决全局样式'injectGlobal' 废除的问题

    最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...

  4. 小程序里的自定义组件:组件的外部样式externalClasses的使用

    启用外部样式: 自定义组件: v-tag 在html 引入 在组件写外部样式的css : .ex-tag { background-color: #fffbdd ; } 在组件使用该外部的样式 这个时 ...

  5. vue文件引入全局样式导致样式重复

    通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ...

  6. 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  7. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  8. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  9. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

随机推荐

  1. SharePoint REST API - 基本操作(一)

    博客地址:http://blog.csdn.net/FoxDave 本文讲述如何应用SharePoint的REST接口完成基本的增删查改操作. 使用SharePoint客户端API和REST服务进 ...

  2. Unity项目中的资源管理

    这是我在2017金山技术开放日分享的部分内容.从贴图资源格式配置的介绍开始,引申出资源配置工具,最后再谈谈一整套项目资源管理方案.在GitHub上可以获取到资源配置工具的代码,是基于下面理念的一份简单 ...

  3. 六、在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 ...

  4. 位(bit)、字节(Byte)、MB(兆位)之间的换算关系

    B是Byte的缩写,意思是字节:b是bit的缩写,意思是比特位:Kb是千比特位,KB是千字节:MB意思是兆字节: 换算关系: 1MB=1024KB=1024B*1024=1048576B: 8bit= ...

  5. uwsgi理解

    uwsgi uWSGI 是一个 Web 服务器,它实现了 WSGI 协议.uwsgi.http 等协议.Nginx 中HttpUwsgiModule 的作用是与 uWSGI 服务器进行交换.WSGI ...

  6. 【Python】多进程-4

    #练习:用event事件控制进程执行顺序,下面例子中,主进程main函数在创建了子进程之后,依然会往下执行,所以会出现主进程先打印出来的情况 import multiprocessing import ...

  7. 【Python】进程-控制块

    一.进程控制块 PCB (Process Control Block): 存放进程的管理和控制信息的数据结构称为进程控制块.它是进程管理和控制的最重要的数据结构,每一个进程均有一个PCB,在创建进程时 ...

  8. 【转】C++类内存分布

    C++类内存分布  https://www.cnblogs.com/jerry19880126/p/3616999.html 书上类继承相关章节到这里就结束了,这里不妨说下C++内存分布结构,我们来看 ...

  9. Gym102040 .Asia Dhaka Regional Contest(寒假自训第9场)

    B .Counting Inversion 题意:给定L,R,求这个区间的逆序对数之和.(L,R<1e15) 思路:一看这个范围就知道是数位DP. 只是维护的东西稍微多一点,需要记录后面的各种数 ...

  10. PTA——猴子吃桃

    PTA 7-35 猴子吃桃问题 #include<stdio.h> int main() { ; scanf("%d",&n); ; i<n; i++) ...