微信小程序自定义组件样式

组件样式隔离

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。

注意点：

1. 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

2. 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

3. 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

4. 继承样式，如 font 、 color ，会从组件外继承到组件内。

5.除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

组件样式隔离

1.isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；

Component({
  options: {
    styleIsolation: 'isolated' // 默认值，启用样式隔离，一般情况不会受外部样式影响
  }
})

2.apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；

Component({
  options: {
    styleIsolation: 'apply-shared' // 使用的页面wxss会影响自定义组件的样式，自定义组件中的指定样式，不会影响页面样式
  }
})

3.shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。

Component({
  options: {
    styleIsolation: 'shared' // 页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件
  }
})