vue学习笔记:修改第三方组件样式

本文介绍了如何根据需求修改Vant组件库中Navbar组件的样式。通过使用Chrome浏览器的元素选择工具,找到决定组件样式的class `.van-nav-bar`。如果该class作用的div与页面其他元素的data-v属性一致,可以直接定义样式修改背景颜色;如果不一致,需要使用 `/deep/` 选择器来穿透 scoped 属性。示例中展示了如何将Navbar背景改为淡蓝色,文字颜色改为白色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        为了提高开发效率,我们经常会使用第三方组件库,例如Ant Design,Vant,Element等。一般组件库会为我们提供比较美观的样式供开发者选择,但是当提供的组件样式不满足需求时,我们需要能够自己来修改组件的样式。

        例如下面这个例子,我用到了Vant组件库中的Navbar组件,这是一个标题组件,默认的样式是这样的:

        现在我需要将组件的背景改为淡蓝色,文字改为白色。

        首先利用谷歌浏览器的元素选择工具,查找到决定组件背景样式的class

如上图所示,此时决定该组件背景颜色的class是.van-nav-bar,然后我们观察一下对应的div,有没有data-v-xxxxx的属性,并且该属性和引用组件的页面中的元素的data-v-xxxxxx属性是不是一致(这个属性是为了防止样式冲突,在页面style 中加了scoped属性后自动生成的)

 (1)如果.van-nav-bar所作用的div上的data-v-xxxx与父组件其它元素的data-v-xxxx一致,则直接定义样式即可。

 例如上面两个data-v-xxxx是一致的,所以直接定义样式

 .van-nav-bar {
        background-color: rgb(0, 140, 255);
    }

(2) 如果不一致,需要在定义样式的同时加上/deep/

       例如在修改文字颜色时,文字样式所对应的div上并没有data-v-xxxxx属性,此时直接定义样式不会生效,必须在样式前面加上/deep/

/deep/
.van-nav-bar__title {
      color: #fff;
}

         修改后,效果如下所示:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值