文章目錄
前言
隨著前端框架的興起，程序員是越來(lái)越懂得利用工具，各種層出不窮的前端UI組件庫(kù)應(yīng)運(yùn)而生，大大減少了程序員對(duì)于制作頁(yè)面需要花費(fèi)的時(shí)間，把時(shí)間更專(zhuān)注于業(yè)務(wù)的邏輯開(kāi)發(fā)，但是應(yīng)該定制好的組件庫(kù)固然方便，但是這樣大家就會(huì)開(kāi)到千篇一律的組件，高度定制的網(wǎng)站設(shè)計(jì)反而少了許多，因此為了解決這個(gè)問(wèn)題，初學(xué)者對(duì)組件內(nèi)的樣式進(jìn)行修改的問(wèn)題是非常有必要的?。?/p>
目錄
文章目錄
前言
一、樣式穿透是什么？
二、使用步驟
1.引入庫(kù)（以Ant design VueUI庫(kù)為例）
2.使用組件
3.修改方式
1.只需部分單頁(yè)面組件修改，在scoped下
? ? ? ? ?2.全局引入
總結(jié)
一、樣式穿透是什么？
樣式穿透，即對(duì)封裝好的組件的樣式進(jìn)行修改，目的是為了使互聯(lián)網(wǎng)公司推出的UI組件庫(kù)能完美得適配自己的產(chǎn)品，開(kāi)發(fā)出自制程度高的頁(yè)面設(shè)計(jì)。
二、使用步驟
1.引入庫(kù)（以Ant design VueUI庫(kù)為例）
代碼如下（示例）：
cmd命令進(jìn)入項(xiàng)目根目錄：
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" />未進(jìn)行樣式穿透時(shí)頁(yè)面效果：（十分突兀）
對(duì)樣式進(jìn)行修改（在全局修改的方式下：在App.vue文件下進(jìn)行樣式調(diào)整。）
.ant-switch-checked {
background-color: #6c5321;
}樣式穿透后頁(yè)面效果：（與UI小姐姐畫(huà)的圖融為一體的感覺(jué)真好!）
3.修改方式
1.只需部分單頁(yè)面組件修改，在scoped下
樣式穿透的寫(xiě)法有三種：>>>、/deep/、::v-deep
注意：深度作用選擇器?>>> （只作用于css）
但如果是sass/less的話可能無(wú)法識(shí)別，這時(shí)候需要使用 /deep/ 選擇器。
2.全局引入
即在App.vue或其他的外部css，不包含scoped的style標(biāo)簽中寫(xiě)樣式，這種寫(xiě)法會(huì)導(dǎo)致整個(gè)項(xiàng)目所用到的該類(lèi)型的組件均受到影響，慎用。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-708062.html
總結(jié)
以上就是今天要講的樣式穿透內(nèi)容，本文僅僅簡(jiǎn)單介紹了樣式穿透產(chǎn)生的背景和基本使用，組件庫(kù)方便了開(kāi)發(fā)，但同時(shí)也少了許多喜歡去鉆研高度定制化頁(yè)面設(shè)計(jì)的程序猿，組件雖好，不可多用，學(xué)好前端三件套，走到哪兒都不怕。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-708062.html
到了這里，關(guān)于前端UI庫(kù)樣式穿透問(wèn)題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
