小程序自定义组件—组件样式

目标

掌握组件样式的编写注意点及组件样式隔离解决方案。

内容

1. 组件中的样式不要使用标签选择器
2. 组件中，样式默认是隔离的： 自定义组件的样式只受到自定义组件 wxss 的影响
3. 通过对组件的配置，可以取消这个隔离的状态。

组件中的样式不要使用标签选择器

使用会报警告

标签选择器本身就是一个坏选择： 页面上样式中的标签选择器也会作用于组件

组件中，class选择器的样式默认是隔离

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。

1. 组件的class选择器不会影响页面元素
2. 页面的class选择器不会影响组件元素

 样式隔离注意点

• app.wxss中的全局样式对组件无效

• 只有class选择器具有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

 建议：在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器

 修改组件样式的隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望外界能够控制组件内部的样式，此时，可以通过在组件的.js文件中设置: options → addGlobalClass 为true

Component({
  options: {
    addGlobalClass: true
  }
})

在页面中设置的同类名的选择器就能作用于子组件内部的元素。但是，组件内的class选择器，不能影响页面的元素。