如果在vue脚手架中使用i-view作为ui开发工具。那么有时会遇到i-view的原生样式不符合个人要求的情况。如果要进行样式覆盖。那么可以采用如下的书写方式。
首先,先将你新自定义的css样式(也就是和i-view样式无关的css样式)都统一写在<style scoped></style>
局部样式块中,局部样式一般用来调节组件放置的位置,对齐方式,浮动方式等位置信息,比如可以为一个<div class='groupbox'></div>
容器编写一个如下css样式。
<style scoped>
.groupbox { //比如我groupbox就是完全自己命名的样式,与i-view组件无关
width: 100%;
height: 100%;
border:rgb(6, 120, 225);
padding: 10px;
font-weight: bold;
border-style: ridge;
}
</style>
========================================================================================================
然后,就是把你想要覆盖或者说替换掉的原生i-view组件,的样式写在<style></style>
全局样式中。如下为i-view中modal对话框的header覆盖自定义的样式。
<style>
.ivu-modal-header {
border-radius: 5px !important;
background-color: rgb(45,140,240) !important;
}
</style>
对这样通过全局样式覆盖还要强调的是,
1.样式的类名必须和i-view原生的类名相同,类名具体是什么在浏览器的开发者工具中选择对应的部分查看。
2.对于i-view的原生样式中已经拥有的样式,需要在自定义覆盖的样式之后加上!important
来使其升高优先级才能生效。如果是你新加入的则不需要。这里需要注意的是,在单个组件中无论是用!important
覆盖的还是新引入的i-view全局样式会向外影响到其他使用相同i-view样式的组件。
3.推荐在全局覆盖的过程中只需要把你想覆盖的和想新增的写上就行,想保留原样的样式可以省略(比如,你引用的某个i-view组件原生样式已经定义了background-color属性和border-style属性,你不想修改这个颜色只想修改边框,那么在覆盖时你只需要书写(border-style:××× !important)就行了,不要重复的书写background-color属性,这样的好处是代码量少,覆盖内容清晰,便于有需要时的修改。
下面展示一下总体布局,以便更直观认识
<template>
// 这里是具体标签的区域
</template>
<script>
// 这里是JavaScript代码的区域
</script>
<style scoped>
// 把你与i-view组件无关的局部样式写在这里
.groupbox {
width: 100%;
height: 100%;
border:rgb(6, 120, 225);
padding: 10px;
font-weight: bold;
border-style: ridge;
}
</style>
<style>
// 把你想要覆盖掉的i-view原生样式和新加入的样式写在这里
.ivu-modal-header {
border-radius: 5px !important;
background-color: rgb(45,140,240) !important;
height: 50px; //不确定原生i-view有没有这个样式,当作没有做一个示范
}
</style>