vue改变第三方ui组件的样式

相信有很多的前端开发都遇到过的问题，引用了第三方的ui组件，效果可以满足业务都是样式需要修改的。

下面我已uni-app的checkbox组件为列改变他的默认样式

1.下面checkbox是默认的样式

2.更改默认样式

效果图：

第一步：选中你要修改的元素

第二步：使用deep深度选择器覆盖第三方组件的样式

css代码：

    //设置checkbox-input未选中的样式
    /deep/  uni-checkbox .uni-checkbox-input{
    		border: 4rpx solid #707070;
    		border-radius: 50%;
    }
    //设置checkbox-input点击之后的样式
     /deep/    .uni-checkbox-input-checked{
    				border-color:  #A52C1E;
    				border: 4rpx solid #A52C1E !important;
    				background:#A52C1E ;
    			}
    			
    // checkbox默认选中是一个勾 我不需要，所以去掉
     /deep/  uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{
    			 content: none;
    			 
    		 }
    //checkbox取消点击的时候有border还是有一个默认样式，覆盖一下
    /deep/  uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
    		border-color:  #707070;
    }

vue只要在选择器前面加上/deep/就可以改变第三方ui组件的样式,这是一个vue开发的小技巧.

好的！更改完毕，就是这样简单