欢迎关注csdn前端领域博主: 前端小王hs
email: 337674757@qq.com
前端交流群: 598778642

在Vue3实战过程中,我们一般都会引用各种组件,比如熟悉的element,但有时候我们引入element的组件后对组件的样式需要更改,但在element的官方文档中却没有对应的属性,这时候就需要我们使用::v-deep进行样式穿透,但需要注意的是,样式穿透和博主之前写过的:deep并不是一样的

讲解:deep文章链接:deep()深度选择器的用法

例如当我们点开F12看到el表格这样的样式时
el-table样式
我们想着把height的1px修改为0px,但我们又不知道怎么去拿到这个样式,就需要我们使用::v-deep样式穿透了
代码如下:

::v-deep.el-table--border .el-table__inner-wrapper::after{
	height:0px;
}

需要注意是v-deep后面的样式并不需要加括号,而:deep后面是需要加括号的

通过使用样式穿透对样式进行修改,就能更方便的修改自己想要的样式和布局

如有前端上的任何问题,可私聊博主

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐