deep css组件 不生效样式

deep的原理

1. 就是去掉scoped在元素上加的标识

deep写法

两种方式

1. v-deep
2. /deep/

例子

.home-container {
	/deep/ .el-input {
		color: red;
	}
	::v-deep .el-input {
		color: red;
	}
}

不生效原因

1. 可能选择范围不对

例子

1.组件中的弹窗加deep样式不生效是因为弹窗有可能是全局生成的在你选择的范围之外

解决办法

<style lang="less" scoped>
.home-container {
	...
}
</style>
<!--给需要deep的元素单独重新写个内嵌样式-->
<style lang="less">
.el-input {
	...
}
</style>

注意这种方法是全局生效 除非因为弹窗有可能是在body里面生成的 所以必须是全局
如果不是尽量避免直接写组件类名尽量在外面加自定义的父类