微信小程序修改原生组件样式

1. 全局修改，直接将修改的样式写在全局的样式文件中；

特殊情况：修改swiper指示点样式时，需要包裹在swiper的样式选择器下才生效。
直接将下列代码放在全局样式中是不会生效的，需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

.wx-swiper-dot {
	width: 12rpx;
	height: 8rpx;
	border-radius: 4rpx;
}
.wx-swiper-dot-active {
	width: 30rpx;
	background-color: #01c75a;
}

需修改为如下代码

// 这里的swiper是元素选择器，可以替换为swiper的类选择器
swiper .wx-swiper-dot {
	width: 12rpx;
	height: 8rpx;
	border-radius: 4rpx;
}
swiper .wx-swiper-dot-active {
	width: 30rpx;
	background-color: #01c75a;
}

2. 单页面修改，在当前页面的样式中添加；如果不考虑是否污染全局样式，样式可以直接写在没有加scoped的style标签内；如果考虑污染，在加了scoped的style标签内，如果使用的scss预编译工具，需要加上 ::v-deep才能生效（/deep/ 在scss中可能会编译错误)

// 这里可以没有swiper，加不加都可
::v-deep .wx-swiper-dot {
	width: 12rpx;
	height: 8rpx;
	border-radius: 4rpx;
}
::v-deep .wx-swiper-dot-active {
	width: 30rpx;
	background-color: $colorPrimary;
}

3. 修改自定义子组件内原生组件样式，第一种方法是在使用该子组件的父组件中修改，方式同上
   第二种方法，直接在当前子组件内的样式中添加，那么此时只能加在没有scoped的style标签内，并需要在实例中加上options：{styleIsolation: ‘shared’}才可生效，且需要加上swiper元素选择器

<style>
	swiper .wx-swiper-dot {
		width: 12rpx;
		height: 8rpx;
		border-radius: 4rpx;
	}
	swiper .wx-swiper-dot-active {
		width: 30rpx;
		background-color: $colorPrimary;
	}
</style>	

export default {
	options: {
		styleIsolation: 'shared'
	}
}

建议修改原生组件样式时都加上默认组件的元素选择器，如radio，checkbox，switch等避免出现样式不生效的问题。