标签：隔离 自定义 样式 微信 程序开发 styleIsolation 组件 选择器

1. 组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的
UI 结构，如图所示：
⚫ 组件 A 的样式不会影响组件 C 的样式
⚫ 组件 A 的样式不会影响小程序页面的样式
⚫ 小程序页面的样式不会影响组件 A 和 C 的样式
好处：
① 防止外界的样式影响组件内部的样式
② 防止组件的样式破坏外界的样式

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

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

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

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

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

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

4. styleIsolation 的可选值

标签：隔离,自定义,样式,微信,程序开发,styleIsolation,组件,选择器
来源： https://www.cnblogs.com/qingheshiguang/p/16582082.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。