省流:vue的scoped影响Element-plus组件样式修改
一、前提
一开始看到Element-plus组件库,觉得熟练使用肯定能快速提高前端开发的效率。然而在简单复制组件源代码,并试图进行修改时,发现无论怎么修改,页面都没有正常显示修改内容。
二、学习过程
1.在使用<el-input ></el-input>时,可以设置宽度却不能设置高度,查阅官方文档,提供了size属性,可使用的值为:'large' | 'default' | 'small'。四方的矩形没踩在我的审美之上,仅仅想简单增加一个圆角属性,无论加在哪里都没有效果。
2.到处查阅之后,有方法说使用深度选择器>>> 和 /deep/,在认为马上就要解决问题并开心地学习如何使用后,修改代码——>运行代码——>报错:
the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
3.报错内容还是很容易理解的,于是在重新学习并认为马上就要解决问题后,修改代码——>运行代码——>没反应。至此,加上到处捣鼓的时间,已经花费了一个小时了(从头开始设计<input>的样式最多也就十分钟吧!!!)。因此放弃,自己设计
4.代码中还使用了<el-checkbox></el-checkbox>,原生的浅蓝色实在不搭我的风格。于是想要修改颜色。有了前车之鉴,在查询到解决办法,并稍作修改后:
.myCheckBox.is-bordered.is-checked {
border-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: rgba(51, 63, 80, 0.7);
background-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
border-color: rgba(51, 63, 80, 0.7);
}
好!没反应!!!
三、解决方法
后来看到一篇文章,里面提到“重新写的样式不能写在scoped的style里面,放scoped里面的话修改无效!”
于是在原有的vue文件最下面,新增如下代码:
<style>
.myCheckBox.is-bordered.is-checked {
border-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: rgba(51, 63, 80, 0.7);
background-color: rgba(51, 63, 80, 0.7);
}
.myCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
border-color: rgba(51, 63, 80, 0.7);
}
</style>
终于得到改变:
原文章路径:
vue使用ElementUI如何修改checkbox复选框颜色_ant design vue a-checkbox 选项框颜色设置-CSDN博客
四、回顾
上述经验只测试了<el-checkbox></el-checkbox>组件,并未测试<el-input ></el-input>组件。但原理相通,应该大差不差。PS:自己设计了样式后,这辈子都不想再使用<el-input ></el-input>组件了o(╥﹏╥)o