vue项目引入less，怎么修改组件样式，vue项目修改组件样式

昨天在项目中遇到了一个问题，因为我们是团队开发，有许多自己写的公共组件。今天我用到其中一个公共组件，但是，当我想去修改这个公共组件的样式的时候我发现，你不能去修改组件原有的样式，因为你修改了别的地方样式就被修改了，当然，我们的样式是加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>