小程序中自定义组件的样式

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

组件样式隔离

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

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

  

• 优点

  • 防止外界的样式影响组件内部的样式
  • 防止组件的样式破坏外界的样式

---

组件样式隔离的注意点

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

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

---

修改组件的样式隔离选项

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

• 第一种方式，在组件的内的 .js 文件中设置 styleIsolation

  Component({
    options: {
      styleIsolation:"isolated"
    }
  })
  

• 第二种方式，，在组件的内的 .json 文件中设置 styleIsolation

  {
    "styleIsolation":"isolated"
  }
  

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