2.vue组件样式穿透

vue组件样式穿透

scoped表示样式只在本组件起作用,如果父组件要改变子组件的样式,如父组件hover的情况下，就需要样式穿透，在不同类型的样式文件中，穿透方式不同。
1.在css，stylus中
>>>

<style scoped>
  .wrapper:hover >>> span {
	color: blue;
  }
</style>

2.在sass中
/deep/

<style lang="scss" scoped>
  .wrapper {
    color: #000000;
	background-color: #fff;
	&:hover {
	  /deep/ a {
	    color: $primary-color;
	  }
	}
  }
</style>