文章目录
前言
随着前端框架的兴起，程序员是越来越懂得利用工具，各种层出不穷的前端UI组件库应运而生，大大减少了程序员对于制作页面需要花费的时间，把时间更专注于业务的逻辑开发，但是应该定制好的组件库固然方便，但是这样大家就会开到千篇一律的组件，高度定制的网站设计反而少了许多，因此为了解决这个问题，初学者对组件内的样式进行修改的问题是非常有必要的！！
目录
一、样式穿透是什么？
样式穿透，即对封装好的组件的样式进行修改，目的是为了使互联网公司推出的UI组件库能完美得适配自己的产品，开发出自制程度高的页面设计。
二、使用步骤
1.引入库（以Ant design VueUI库为例）
代码如下（示例）：
cmd命令进入项目根目录：
yarn add antd//main.ts中
import { createApp } from "vue";
import { Switch } from "ant-design-vue";
import 'ant-design-vue/dist/antd.less';
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";2.使用组件
代码如下（示例）：
<a-switch v-model:checked="deliveryAI" />未进行样式穿透时页面效果：（十分突兀）
对样式进行修改（在全局修改的方式下：在App.vue文件下进行样式调整。）
.ant-switch-checked {
background-color: #6c5321;
}样式穿透后页面效果：（与UI小姐姐画的图融为一体的感觉真好!）
3.修改方式
1.只需部分单页面组件修改，在scoped下
样式穿透的写法有三种：>>>、/deep/、::v-deep
注意：深度作用选择器 >>> （只作用于css）
但如果是sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器。
2.全局引入
即在App.vue或其他的外部css，不包含scoped的style标签中写样式，这种写法会导致整个项目所用到的该类型的组件均受到影响，慎用。
总结
以上就是今天要讲的样式穿透内容，本文仅仅简单介绍了样式穿透产生的背景和基本使用，组件库方便了开发，但同时也少了许多喜欢去钻研高度定制化页面设计的程序猿，组件虽好，不可多用，学好前端三件套，走到哪儿都不怕。