自定义组件-样式

自定义组件-样式

1.组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构。

好处：

1. 防止外界的样式影响组件内部的样式
2. 防止组件的样式破坏外界的样式

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

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离的效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

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

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

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

//1，在组件的 .js 文件中增加如下配置
Component({
	options:{
		stylelsolation:'isolated'
	}
})

// 或在组件的 .json 文件中新增如下配置
{
	stylelsolation:'isolated'
}

4.stylelsolation的可选值

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