必须要学会的修改第三方UI框架的样式

这边就以van3UI框架为例，其他的UI框架大同小异（antdesign有些许不同）

第一种：如果说我们需要修改的dom元素是自己写的，而不是框架里面内置的元素，那我们就可以正常在css样式中直接修改，比如一下我们需要修改img中的样式，我们用的是van-tabbar-item的自定义图片方式，（具体自行去vant3官方文档中查看，这里不多叙述）我们就可以直接在style中直接去对img进行样式修改。

<template>
  <div class="tabbar">
    <van-tabbar v-model="active" active-color="#ff9854">
      <template v-for="(item, index) in tabbarData" :key="item">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img
              v-if="active !== index"
              :src="getAssetURL(item.image)"
              alt=""
            />
            <img v-else :src="getAssetURL(item.imageActive)" alt="" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import tabbarData from "@/assets/data/tabbar.js";
import { getAssetURL } from "@/utils/load_assets_img.js";
import { ref } from "vue";
import { useRouter } from "vue-router";

const active = ref(0);
const router = useRouter();
</script>

<style lang="less" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;
  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  span {
    font-size: 12px;
    margin-top: 2px;
  }
  img {
    width: 32px;
  }
  .active {
    color: var(--primary-color);
  }
}
</style>

第二种：如果我们的图片用的是vant3自带的字体图标，即如下代码  

<template>
  <div class="tabbar">
    <van-tabbar v-model="active" active-color="#ff9854">
      <template v-for="(item, index) in tabbarData" :key="item">
        <van-tabbar-item :to="item.path" icon="home-o">
          <span>{{ item.text }}</span>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import tabbarData from "@/assets/data/tabbar.js";
import { getAssetURL } from "@/utils/load_assets_img.js";
import { ref } from "vue";
import { useRouter } from "vue-router";

const active = ref(0);
const router = useRouter();
</script>

<style lang="less" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;
  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  span {
    font-size: 12px;
    margin-top: 2px;
  }
  .active {
    color: var(--primary-color);
  }
}
</style>

这边需要注意，一种是全局修改，一种是局部修改。

全局修改：

局部修改：

注意：像这种变量，我们只是单个组件需要改变他的内置变量，我们最好是重写在需要修改的组件内部style中，别去重写在全局的样式表中，如果重写在全局的样式表中的话，如果别的组件不希望修改该变量名，会有冲突。  

第三种：（最常用）

直接找到需要修改的样式类名，在需要修改的组件style中加上:deep直接修改

总结：

1. 用插槽，插入自己的元素，那么在自己的作用域中直接修改这个元素

2. 全局定义一个变量，覆盖他默认变量的值

   缺点：全局修改了变量

3. 在需要修改变量的组件中局部修改一个变量

   优点：局部修改，不污染全局

4. 直接查找对应的子组件选择器，进行修改，:deep(子组件选择器)直接修改css