昨天在项目中遇到了一个问题,因为我们是团队开发,有许多自己写的公共组件。今天我用到其中一个公共组件,但是,当我想去修改这个公共组件的样式的时候我发现,你不能去修改组件原有的样式,因为你修改了别的地方样式就被修改了,当然,我们的样式是加scoped,如果去掉 也会影响别的地方样式(我们用的是less)。经过一系列研究,我发现了一个属性deep。
deep 深度选择器(样式穿透)
代码格式就是 :deep(选择器){css},当然,这里面的选择器是你的引入的组件的选择器。这样就可以覆盖掉组件原来的样式并且只在当前组件生效,并不影响别的地方。
<style scoped lang="less">
:deep(.searchContainer) { // 要注意小括号和花括号中间的空格,没有空格有时候会报错
width: 100%;
min-width: auto !important;
}
</style>
deep写法有很多,有的人说另一种写法解析快,咱也不理解,但是如果当前写法不生效的时候我们可以换一种写法,如下:
<style scoped lang="less">
::deep .searchContainer {
width: 100%;
min-width: auto !important;
}
/*
或者
*/
/deep/ .searchContainer{
width: 100%;
min-width: auto !important;
}
</style>