CSS属性强制覆盖

在前端开发过程中我们经常使用一些UI组件，这些UI组件都有自己的CSS配置，有时候我们需要使用自己的配置，这时可以在标签中添加class属性强行覆盖原来的属性。template中修改代码如下：

<div style="width: 100%;height: 100%;margin: 0;padding: 0;border: 0;">
  <cube-tab-bar
    v-model="selectedLabelDefault"
    :data="tabs"
    @click="clickHandler"
    @change="changeHandler"
    class="my-tab-bar">
  </cube-tab-bar>
</div>

添加CSS代码：

</style>
<style type="text/css">
  .my-tab-bar i {
    font-size: 0.32rem !important;
  }

  .my-tab-bar div {
    margin-top: 0.08rem !important;
    font-size: 0.24rem !important;
  }
</style>

重点：使用!important增加CSS样式权重从而覆盖UI中原本的CSS设置。
另外rem为一种像素单位，主要用来做页面适配，例如设置1rem = 100px，则0.32rem = 32px。