css样式穿透(/deep/和::v-deep以及<<<深度选择器)
创始人
2024-04-27 18:42:27
0

css样式穿透(/deep/深度选择器)

  • 场景复现
  • 样式穿透
    • stylus的样式穿透 使用>>>(不推荐)
    • sass和less的样式穿透(推荐)

场景复现

当我们使用ant design vue组件库(点击跳转查看相关内容)时,经常会遇到样式无法修改的问题。这是因为 ant design vue 组件库的组件都具有自带的默认样式

  • 通过查询资料后发现是scoped的问题。
  • scoped看起来很好用,但是在vue项目中,当我们引入第三方组件库(比如ant design vue UI组件库)时,需要在局部组件中修改第三方组件库的样式,而又不想去除因scoped属性而造成的组件之间样式覆盖的问题。
  • 这个时候我们就可以通过 样式穿透 这个特殊方式,穿透原有的默认样式,实现需要的效果。

样式穿透

stylus的样式穿透 使用>>>(不推荐)

语法:

  • 外层容器 >>> 组件 { }
从组件A穿透到组件B:
.A >>> .B { background: #fff
}

sass和less的样式穿透(推荐)

这两个常用的样式穿透的方式有两种,分别是 /deep/::v-deep

语法:

  • 外层容器 /deep/ 组件 { }
  • 外层容器 ::v-deep组件{ }

::v-deep/deep/都是深度选择器(样式穿透),都能实现对组件内部的样式修改。
两种方式没有很大的区别,如果用/deep/无效,则换用::v-deep试试,一般都是有效的。

/* 从A组件深层穿透到B*/
.A /deep/ .B {border-color: #fff !important;
}
/* 从C组件深层穿透到button*/
.C ::v-deep button {height: 25px;
}
/* 深层穿透到switch*/
::v-deep .ant-switch ::after {height: 21px;width: 21px;
}

Less和sacc都可以进行 样式叠加(嵌套) 的写法,不过使用样式穿透的时候,写法会有些不一样。

/* 两层嵌套*/
.A ::v-deep {button {height: 25px;}.B ::after {height: 21px;width: 21px;}
}

注意: 确保样式嵌套层级正确。


文章发展线

本专题文章发展线
css实现鼠标禁用(鼠标滑过显示红色禁止符号)
css样式穿透(/deep/深度选择器)
vue antd项目实战——修改ant design vue table组件的默认样式(css样式穿透)
通过ant design vue的API属性实现不可控操作
vue antd项目实战——根据数据属性实现table表格中行的不可控操作

后续将不定期持续更新相关内容~🔥
觉得这篇文章有用的小伙伴们🔥
可以点赞➕收藏➕关注哦~🔥

相关内容

热门资讯

宠智灵打造宠物智能项圈AI解决... 转自:蚌埠新闻网在智能硬件加速发展的推动下,宠物智能项圈作为连接宠物与数字世界的关键载体正从简单的定...
数字经济ETF工银(56122... 7月11日,截止午间收盘,数字经济ETF工银(561220)涨0.68%,报1.036元,成交额37...
高中生跑腿半天赚16元倒欠千余... 转自:北京新闻广播 #3名高中生兼职跑腿没赚钱反而倒贴#...
升级训练基地功能 锤炼民兵专业... 转自:中国国防报四川省宜宾军分区升级训练基地功能 锤炼民兵专业技能本报讯 勾飞、记者杨晓霖报道:“岷...
业绩靓丽,药明康德罕见涨停,医... 昨夜,药明康德发布半年度业绩预告,营收208亿人民币,同比增长20.64%;净利润85.6亿,同比增...
鲁股观察 | 61.26亿元!... 转自:山东财经报道文 | 经济导报 段海涛杰瑞股份(002353.SZ)7月9日晚间公告称,全资子公...
ETF午评 | 稀土、大金融板... 格隆汇7月11日|A股三大指数早盘集体上涨,截至午盘,沪指涨1.05%,深成指涨0.94%,创业板指...
青春力量助力乡村振兴 长郡学子... 青春脚步量乡野,灼见真知话振兴!7月7日至11日,长郡中学高一第三大队150余名师生进驻长郡自贸临空...
意义重大!GE医疗北京基地迎来... 近日,在GE医疗北京影像设备制造基地(以下简称“GE医疗北京基地”),迎来了第3.5万台探测器的正式...
长图丨追火大同,越来越野 (转自:山西新闻网)