前端UI库样式穿透问题解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端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" />

未进行样式穿透时页面效果：（十分突兀）

前端样式穿透,前端框架,前端,javascript,前端框架,easyui,anti-design-vue

对样式进行修改（在全局修改的方式下：在App.vue文件下进行样式调整。）

.ant-switch-checked {
  background-color: #6c5321;
}

样式穿透后页面效果：（与UI小姐姐画的图融为一体的感觉真好!）

前端样式穿透,前端框架,前端,javascript,前端框架,easyui,anti-design-vue

3.修改方式

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

样式穿透的写法有三种：>>>、/deep/、::v-deep

注意：深度作用选择器 >>> （只作用于css）

但如果是sass/less的话可能无法识别，这时候需要使用 /deep/ 选择器。

前端样式穿透,前端框架,前端,javascript,前端框架,easyui,anti-design-vue

2.全局引入

即在App.vue或其他的外部css，不包含scoped的style标签中写样式，这种写法会导致整个项目所用到的该类型的组件均受到影响，慎用。

前端样式穿透,前端框架,前端,javascript,前端框架,easyui,anti-design-vue

总结

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

到了这里，关于前端UI库样式穿透问题解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！