快速修改antd?vue單個組件的默認樣式

更新時間：2022年08月11日 11:25:26 作者：Unique·Blue

這篇文章主要介紹了快速修改antd?vue單個組件的默認樣式方式，具有很好的參考價值，希望對大家有所幫助。

一、想要修改組件的默認樣式

首先你需要知道組件是渲染在哪里的這個組件是渲染在當前頁面內(nèi)部，還是脫離vue根節(jié)點單獨渲染？（根節(jié)點默認id=“app”）

這個問題的答案很容易得到，打開文章頂部的antdv官方文檔，任意選中組件，F(xiàn)12打開調(diào)試，觀察Elements，例如：

1、不難看出，button是渲染在當前頁面內(nèi)部的，包裹在"#app"的容器里。這樣的組件還有很多，比如input、radio等等。再看下面這張圖：

2、dropdown組件則是一部分渲染在#app內(nèi)，一部分渲染在"#app"的外面且與"#app"同級。這樣的組件也有很多，比如select、drawer等等

3、dropdown等，我們發(fā)現(xiàn)它們的共同點：這些組件都是“觸發(fā)型”組件，都是由用戶hover、click等手動激活后，進行了動態(tài)渲染的

確定了這一點之后有什么用呢？

第二類組件，class類名設置的僅僅是#app內(nèi)部元素，而渲染在#app之外的那部分節(jié)點，需要單獨設置類名，比如 tooltip，我們設置overlayClassName="overlay-class"來測試：

我們發(fā)現(xiàn)類名已經(jīng)設置好了。這一條解決了沒有對應到自己的父級類會造成的樣式不生效的問題

不同組件設置的屬性名稱不完全相同，使用時去查閱文檔就可以了

二、類名scoped的限制你是否會有這樣的疑惑

為什么有的需要設置 >>> 或者 /deep/ 來重寫深層樣式，有的卻不需要？

開發(fā)時，我們會根據(jù)需要設置每個頁面、組件css 的 scoped屬性，眾所周知，這個屬性是為了限制css只被當前vue文件所使用，那它是如何實現(xiàn)這個限制的呢？

我們?nèi)我獯蜷_一個scoped的頁面，打開調(diào)試

我們可以發(fā)現(xiàn)，這個頁面的幾乎所有節(jié)點，都有了一個共同的“標識”

我們在elements中打開對應scoped的css文件，看下實際書寫和渲染出來的對應關(guān)系：

.override {
  padding: 100px 100px 200px 100px;
}
/* 按鈕 */
.test-button {
  background: pink;
  border: 0;
}
.ant-btn-primary {
  background: #ccc;
  border: 0;
}
/* 面包屑 */
.container >>> .ant-breadcrumb-separator {
  margin: 10px;
}
.container /deep/ .ant-breadcrumb-separator {
  margin: 30px;
}

發(fā)現(xiàn)css也被編譯成了具有標識的！重要的是，設置在/deep/ 和 >>> 后面的類，在編譯之后，是沒有這個標識的！

發(fā)現(xiàn)了這一點之后，我們不需要去管是什么頁面，用的什么組件，只需要打開Elements面板，觀察你要寫的節(jié)點class，有沒有這個“標識”。

如果有的話，正常寫css，類名就會被編譯成有“標識”的；
如果沒有的話，需要設置在/deep/、>>>之后，編譯后就會拿掉這個標識

三、使用/deep/、 >>>時

parentClass所在的節(jié)點是不帶“標識”的怎么辦？

根據(jù)前面的總結(jié)，設置scoped后，此時的 parentClass 是被編譯成帶“標識”的， sonClass是不帶“標識”的。

.parentClass >>> .sonClass
.parentClass /deep/ .sonClass

那實際使用時，如果parentClass所在的節(jié)點本身是不帶 “標識” 的怎么辦？

例如：

antd vue的組件，渲染在#app外部，已經(jīng)按照第一條給了自定義的類名wrapClassName，但是這個wrapClassName我們?nèi)匀粺o法使用，因為它所在的div并沒有這個“標識”（極少數(shù)情況會出現(xiàn)）

這時我們拿出了終極武器，

<div ref="wrap"> 
  <a-modal 
    v-model="visible" 
    title="Basic Modal" 
    @ok="handleOk" 
    class="test" 
    :getContainer="() => this.$refs.wrap"
   >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</div>

通過設置組件的 getContainer屬性（有的組件是 getPopupContainer ），我們將原本渲染在#app外部的節(jié)點，手動掛載到了#app內(nèi)部，之后再通過第二條的規(guī)則去設置就可以啦~

也可以不指定ref，直接設置 :getContainer="triggerNode => triggerNode.parentNode"默認找到#app內(nèi)部的父節(jié)點

以上三點：