小程序的样式隔离

最新推荐文章于 2025-10-31 15:26:59 发布

原创最新推荐文章于 2025-10-31 15:26:59 发布 · 695 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了微信小程序中组件的样式隔离选项，包括`isolated`、`apply-shared`和`shared`的使用，以及如何通过外部样式类在组件内部引用外部定义的样式。通过在组件内部配置`externalClasses`并关联父组件的子组件标签，可以实现自定义组件与外部样式交互，提高样式控制的灵活性。

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>