改变第三方的样式

最新推荐文章于 2023-07-06 11:06:37 发布

天热无情人

最新推荐文章于 2023-07-06 11:06:37 发布

阅读量360

点赞数 1

文章标签： vue css

本文链接：https://blog.csdn.net/weixin_45156520/article/details/106042952

版权

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;
}