i-view原生样式覆盖的一种思路

如果在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>