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 @   DurianTRY  阅读(1165)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
点击右上角即可分享
微信分享提示