vue 无法覆盖vant的UI组件的样式问题
作者:梦幻飞雪 时间:2024-05-13 09:44:23
无法覆盖vant的UI组件的样式
有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用。
解决方法
使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件
<style scoped>
? .a >>> .b { /* ... */ }
</style>
以上的代码会编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
注意:如果你使用了Less或Sass等预处理器,可能无法>>>正确解析。
在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。
使用Less或Sass等预处理器的写法如下:
.van-radio {
? /deep/ .van-radio__label {
? ? width: 500px;
? }
}
使用样式穿透,强制覆盖Vant原样式
使用Vant组件的时候,我们会发现在某些场合组件的原样式不符合我们的需求,这个时候我们就需要重写组件的原样式。
这个是组件的原样式
因为style标签添加了scope属性,scope会保护样式不被污染,这里要让我们自己的样式生效就必须使用样式穿透,由父样式穿透到子样式:
.w-all >>> .van-field__control{text-align: right;}
在浏览器可以看到
text-align
:left那一栏已经被一条横线划掉,取而代之的是:
而这个,就是因为使用了样式穿透强制覆盖了原样式,从而实现我们需要的样式效果。
来源:https://www.cnblogs.com/wangyihong/p/11535103.html
标签:无法覆盖,vant,UI组件,样式
0
投稿
猜你喜欢
VS2013连接MySQL5.6成功案例一枚
2024-01-20 17:36:51
Python字符串格式化
2023-08-19 20:27:44
PHP的mysqli_set_charset()函数讲解
2023-07-11 06:22:17
python3中eval函数用法使用简介
2023-08-12 02:28:48
当恢复sqlserver bak文件时,原始的用户无法删除的解决方法
2024-01-15 07:59:00
用pytorch的nn.Module构造简单全链接层实例
2022-01-04 00:00:17
谈谈我的“分离”观
2010-08-31 14:47:00
记录集不支持更新。这可能是提供程序的限制,也可能是选定锁定类型的限制
2010-04-07 22:35:00
scrollWidth,clientWidth与offsetWidth的区别
2024-04-22 22:28:38
详解ASP.NET Core中间件Middleware
2024-05-09 09:05:15
Python 统计字数的思路详解
2023-01-29 00:17:44
Python数据分析之 Pandas Dataframe合并和去重操作
2022-12-31 07:11:59
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2024-01-19 16:38:39
分享Sql Server 存储过程使用方法
2024-01-13 06:42:36
django ObjectDoesNotExist 和 DoesNotExist的用法
2022-01-29 05:37:15
基于python时间处理方法(详解)
2022-01-08 08:38:30
python占位符输入方式实例
2022-10-26 11:46:16
python中模块导入模式详解
2022-04-03 08:54:29
python datetime处理时间小结
2022-11-21 01:38:15
Python生成8位随机字符串的方法分析
2023-06-15 20:53:08