Ant Design of Vue 組件樣式覆蓋技巧

前言

最近使用 Ant Design of Vue 的組件庫進行項目開發時，發現有些組件的樣式與產品需求存在必定的差別。這時候，咱們就須要覆蓋第三方的樣式。查閱了一番資料，發現之前本身定位第三方組件的樣式的作法並非正確的，因而便有了此文。

需求

項目中的需求是實現一個相似 Google 搜索的組件。這個組件具備多個下拉列表，以及刷新按鈕。幸運的是，antd vue 提供了一個 a-input-group 組件，支持 input、select、button 的組件進行自由組合，造成一個新組件。

雛形

通過一番組合，組件的雛形已經有了。可是組件默認的邊框和點擊時的藍色光暈使得整個組件看起來並不美觀。因此須要將這些默認的組件樣式去除掉。

樣式覆蓋技巧

目標樣式定位

樣式覆蓋

給組件的最外層套一個 class 爲 wrapper 的類名，方便在樣式覆蓋時縮小樣式範圍，避免污染全局樣式。

/* 去除默認邊框 */
.wrapper .ant-btn,
.wrapper .ant-select-selection,
.wrapper .ant-select-auto-complete.ant-select .ant-input {
  border: none;
}

/* 按鈕點擊光暈去除 */
button[ant-click-animating-without-extra-node]:after {
  border: 0 none;
  opacity: 0;
  animation: none 0 ease 0 1 normal;
}
複製代碼

效果

demo 地址

antd input-group style test