修改iview默认样式

今天为了调iview表单默认字体的大小，讲真我调的快哭了，好在所有的方法一一试过之后，终于成功了，记录下来供参考。

上图：

原始效果

默认属性

解决的过程：

1. 因为之前在用element ui时会经常修改默认属性，一上来我就直接参照以前的方法修改。直接把默认属性.ivu-form .ivu-form-item-label复制到样式里直接修改，没反应。

.ivu-form .ivu-form-item-label{
  font-size: 15px;
}

2. 我以为是因为默认属性有多层嵌套，不能直接修到最底层的，所以我在字体这里加了class，改用穿透法>>>测试，没反应。

<Form :model="formItem" :label-width="90" class="fontsize" inline></Form>

css
.fontsize >>> .ivu-form .ivu-form-item-label{
    font-size: 15px;
}

解决的二种方法

最终效果

1. 继续换成穿透法/deep/测试，去掉默认的上一层，然后测试就成功了。说实在的，我也是在刚写博客时为了演示效果重新测试一次，没想到刚刚成功了，我也是一脸懵逼，不管怎么说，达到效果了就行。

<Form :model="formItem" :label-width="90" class="fontsize" inline></Form>

css
.fontsize /deep/  .ivu-form-item-label{
    font-size: 15px;
}

2. 在App.vue里更改。
   2.1 首先将之前class的写法改成id。

<Form :model="formItem" :label-width="90" id="fontsize" inline></Form>

2.2 在App.vue中style里更改，然后就实现效果了。

/*注意不要加scoped*/
<style>  
    #fontsize .ivu-form-item-label{
      font-size: 15px;
    }
</style>

在网上也找了很多方法，有的方法别人用就可以，你自己用的时候就是各种不行，也有可能是我这个项目里加载的样式太多导致冲突了，大家还是多试试吧。

我最后是参考这篇博客实现的效果：这篇博客实现的效果