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表格中行的不可控操作

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

相关内容

热门资讯

新还珠格格,欣荣和永琪有个孩子... 新还珠格格,欣荣和永琪有个孩子?不是说永琪从来都没碰过她吗?绵忆到底是他和小燕子的还是欣荣的啊求正解...
中级会计怎么备考?今年几月考试... 中级会计怎么备考?今年几月考试?您好,很高兴为您解答中级会计师考试,教材是根本和基础,所有的题目都是...
继兴业、招商、中信后,邮储银行... (来源:现代商业银行杂志)金融资产投资公司(AIC)队伍再添新员。邮储银行近日发布公告称,该行拟以自...
中央巡视组对陕西开展两个半月常... 转自:北京日报客户端日前,中央第十五巡视组进驻陕西省,将开展为期两个半月左右的常规巡视,并会同陕西省...
柳州幻境空间在哪里 柳州幻境空间在哪里柳州幻境空间是位于广西柳州市城中区华联商闷郑城4楼的室内主题乐园,提供了各种游戏和...
中央巡视组进驻山东 联动巡视济... 转自:央视新闻客户端经党中央批准,二十届中央第六轮巡视将对16个省(自治区、直辖市)开展常规巡视,并...
继续发布暴雨蓝色预警!北京等地... 转自:央视新闻客户端中央气象台19日早6时继续发布暴雨蓝色预警。预计,19日早8时至20日早8时,青...
降妖伏魔篇演员有哪些 降妖伏魔篇演员有哪些文章舒淇程小东黄勃
晚上十一点在河边抓鱼听到有人叫... 晚上十一点在河边抓鱼听到有人叫我小名声音跟我一个朋友一样,电筒照却没有发现有人而且我女朋友也听见了不...
属猴的为什么吸引属狗的人 属猴的为什么吸引属狗的人属相狗虽不善甜言蜜语,为人多有情感之被捉,然其铅轮内心却多有向往甜蜜幸福之生...