前端UI库样式穿透问题解决

文章目录

---

前言

随着前端框架的兴起，程序员是越来越懂得利用工具，各种层出不穷的前端UI组件库应运而生，大大减少了程序员对于制作页面需要花费的时间，把时间更专注于业务的逻辑开发，但是应该定制好的组件库固然方便，但是这样大家就会开到千篇一律的组件，高度定制的网站设计反而少了许多，因此为了解决这个问题，初学者对组件内的样式进行修改的问题是非常有必要的！！

---

目录

文章目录

前言

一、样式穿透是什么？

二、使用步骤

1.引入库（以Ant design VueUI库为例）

2.使用组件

3.修改方式

1.只需部分单页面组件修改，在scoped下

         2.全局引入

总结

---

一、样式穿透是什么？

样式穿透，即对封装好的组件的样式进行修改，目的是为了使互联网公司推出的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标签中写样式，这种写法会导致整个项目所用到的该类型的组件均受到影响，慎用。

总结

以上就是今天要讲的样式穿透内容，本文仅仅简单介绍了样式穿透产生的背景和基本使用，组件库方便了开发，但同时也少了许多喜欢去钻研高度定制化页面设计的程序猿，组件虽好，不可多用，学好前端三件套，走到哪儿都不怕。