微信小程序修改原生组件样式（uni-app)

这篇具有很好参考价值的文章主要介绍了微信小程序修改原生组件样式（uni-app)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

特殊情况：修改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;
}

单页面修改，在当前页面的样式中添加；如果不考虑是否污染全局样式，样式可以直接写在没有加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;
}

修改自定义子组件内原生组件样式，第一种方法是在使用该子组件的父组件中修改，方式同上
第二种方法，直接在当前子组件内的样式中添加，那么此时只能加在没有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等避免出现样式不生效的问题。文章来源地址https://www.toymoban.com/news/detail-744305.html

到了这里，关于微信小程序修改原生组件样式（uni-app)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Toy模板网

微信小程序修改原生组件样式（uni-app)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2