1.通过在组件的options中配置
Component({
options: {
styleIsolation: '隔离选项'
}
})
其中【隔离选项】值包括:
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(默认值);
apply-shared 父级样式会穿透影响组件样式,但组件样式不会影响其他页面
shared:互相影响
2.外部样式类
1.在app.wxss中定义一个class样式,例如:
.box {
background:#0ff;
}
2.如果将.box影响到组件内部呢?
第一步: 在组件内部配置:
Component({
externalClasses: ['my-class'],
})
第二步:在应用的父级组件的子组件标签上关联
<Dialog-box my-class="box"></Dialog-box>
第三步:应用my-class到对应的标签上
<view class="my-class">{{ content }}</view>