vue样式穿透 ::v-deep的具体使用:

在vue项目开发中,我们一般都是<style lang="scss" scoped> .... </style>中编写只会影响当前组件内的样式,但如果最后将这些组件整合的时候发现有些样式不够完美(或需要覆盖element-ui中的样式时),想要去修改样式时却发现无法生效,去掉scoped的话又会影响全局样式。
在网上找了很久,发现可以使用>>>/deep/来解决

  1. >>>
    如果vue中style使用的是css,那么则可以使用>>>
    <style lang="css" scoped>
    	.a >>> .b { 
    	 /* ... */
    	}
    </style>
    
  2. /deep/
    如果vue中使用的是style使用css(less, sass, scss)的预处理器,则需要使用deep,因为scss预处理器是无法解析>>>
    <style lang="scss" scoped>
    	.a{
    		/deep/ .b { 
    		 /* ... */
    		}
    	} 
    </style>
    
  3. ::v-deep
    如果你是使用vue-cli3以上版本的脚手架创建的项目,使用/deep/可能会出现报错信息。如果出现报错或失效等问题,则可以使用::v-deep
    <style lang="scss" scoped>
    	::v-deep .a{
    	 /* ... */
    	} 
    </style>
    
    注意:必须是要以双冒号开头的
    如果你希望 scoped 样式中的选择器能够作用得“更深”,例如影响子组件,你可以使用以上方法来实现!!!
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐