自定义组件--样式

1.默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构，如图所示：

• 组件A的样式不会影响组件C的样式
• 组件A的样式不会影响小程序页面的样式
• 小程序页面的样式不会影响组件A和C的样式

 2.组件样式隔离的注意点：

• app.wxss中的全局样式对组件无效
• 只有class选择器都会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
• 建议：在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器

3.修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相不干扰的问题，但有时，我们希望外界能够控制组件内部的样式，此时，可以通过styleIsolation修改组件的样式隔离选项，用法如下

//在组件的.js文件中新增如下配置
Component({

    options:{
        styleIsolation:'isolated'
    },

styleIsolation的可选项： 

可选框	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但自定义组件wxss指定的样式不会影响到页面
shared	否	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响到页面和其他设置了apply-shared或shared的自定义组件