element-ui中 Progress 进度条 圆角背景色

进度条.png

——组件中提供的都是带有圆角的进度条，项目中要求的是矩形进度条，查看元素时在控制台点掉border-radius属性可实现矩形样式，于是到代码中意图修改组件样式。

tu1.png

//找到两个类名修改样式，但是不管怎么试都不生效，加!important也无效
.el-progress-bar__outer,
 .el-progress-bar__inner {
     border-radius: inherit ;
    }

后来考虑可能是因为代码中的dom上没有这些代码，所以找不到这类名，也就加不上样式了，然后继续各种方法查询，最后get到一个关键词

//vue页面中写的  加了scoped，但是也不能去掉  去掉后整体样式都没了
<style lang="less" scoped>
</style>

又按这个思路继续各种查，终于有了解决的办法，属性穿透“”。修改样式时，需要关闭 scoped ，如果是有scoped属性的，需要添加属性穿透 ::v-deep
注意：vue版本高的采用:deep()写法，不然会报警告

//加上::v-deep，可生效，背景色，圆角都可在这两个类中按需修改
:deep(.el-progress-bar__outer) ,
:deep(.el-progress-bar__inner)  {
        border-radius: inherit ;
    }

后记：写的比较啰嗦，是因为为它费心了很久，一个简单的东西因为自己知识面窄而困扰很久，还是要多多学习才行。