UI组件样式修改(Ele、iview等)

1.技术点:CSS,VUE等

步骤:

1.通过浏览器调试一下看你需要修改的样式在哪一个具体的属性上面

2.找到了当前属性—————属性名修改就行 和css一样

注意如果修改了 没有效果 使用::v-deep深度修改

例子1:iviewUI修改样式为例--改动边框颜色背景颜色字体颜色等

修改样式:下


<style>
.login-con .ivu-input {
    height: 40px;
    /* 增加的属性*/
    background-color: #0a4183;
    border: 1px solid #1b63a6;
    border-radius: 0px;
    color: #fff;
}
</style>

修改前:

UI组件样式修改(Ele、iview等)

 

修改后:

UI组件样式修改(Ele、iview等)

 

例子2:有时候需要::v-deep才能修改

<style>
/*通过v-deep才能修改*/
::v-deep.el-input__inner {
     height: 100%;
     background-color: #5b8ff9;
     border-radius: 0.3125rem;
     border: 0.0125rem solid #055fed;
}
</style>

上一篇:python编写工具番外篇(5)-- 处理一些csv文件


下一篇:CF1372B - Omkar and Last Class of Math(贪心+数学规律+数论+*1300)