uni-app小程序之覆盖uni-ui组件的默认样式

组件的class

通过调试器找到具体的class

样式位置和写法

方法一、全局修改

只有在APP.vue上面写样式 且加!important才生效。此时全局的此组件都会使用此样式,不灵活

<style>
	.uni-section {
		background-color: #562b2b !important;
	}
</style>

方法二、单独设置

此方法可单独在组件里面灵活设置样式。
1.在组件内script加入options,进行样式隔离

options:{
			styleIsolation:'shared'
		},

自定义组件 JSON 中的 styleIsolation 选项从基础库版本 2.10.1 开始支持。它支持以下取值:
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

2.组件内设置样式

::v-deep .uni-section{
		background-color: #ececec;
	}
posted @ 2024-02-23 09:59  DurianTRY  阅读(827)  评论(0编辑  收藏  举报