微信小程序中如何修改自定义组件中的默认样式

前言

组件对应 wxss 文件的样式，只对组件wxml内的节点生效；但是如果修改组件中如：checkbox、radio等它们的默认样式，在组件wxss中修改也是无效的；并且怎么在组件引用的页面去控制组件中的样式呢？

方法

一、暴露class

在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出来的class进行class覆盖；

1. 在组件wxml中找到要修改的标签

// 组件中需要修改的标签 如：
 <view class="myclass">我是组件内部标签view>

2. 在组件js文件中将这个class暴露出去

/* 组件 myComponent.js */
Component({
  externalClasses: ['my-class']  // 可以是多个class名
})

3. 在引用组件的页面中使用

<myComponent my-class="text">myComponent>

4. 在在引用组件的wxss中修改样式

.text {
	color: red;
}

二、 样式共享

在官网中有组件样式隔离这一说明，就是可以在组件内部去指定组件的样式与页面的样式之间如何共享和隔离；

1. 指定特殊的样式隔离选项 在组件js文件中添加

Component({
  options: {
    styleIsolation: 'shared'
  }
})

styleIsolation可以取一下几个值：

1. isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
2. apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
3. shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

2. 使用addGlobalClass，即在 Component 的 options 中设置 addGlobalClass: true ；这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。

/* 组件 myComponent.js */
Component({
  options: {
    addGlobalClass: true,
  }
})

这样在页面中或者在app.wxss都可以设置组件中的样式了

三、引用页面或父组件的样式

即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。

• 组件与页面
• 在页面wxss中定义样式

.blue-text {
  color: blue;
}

• 在组件中可以使用 ~ 来引用这个类的样式：

<view class="~blue-text"> 这段文本是蓝色的 view>

2. 组件与组件

• 如果在一个组件的父组件 wxss 中定义了：

.red-text {
  color: red;
}

• 在这个组件中可以使用 ^ 来引用这个类的样式：

<view class="^red-text"> 这段文本是红色的 view>

四【注意事项】

• 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
• 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用
• 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
• 继承样式，如 font 、 color ，会从组件外继承到组件内。
• 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

#a { } /* 在组件中不能使用 /
[a] { } / 在组件中不能使用 /
button { } / 在组件中不能使用 /
.a > .b { } / 除非 .a 是 view 组件节点，否则不一定会生效 */