Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

客製化修改 Quasar Framework 元件樣式

最近在使用 Quasar CLI 開發專案,裡面有許多已經做好的元件可以使用,但是它所提供的元件是層層包裝好的,有些元件的 CSS 樣式甚至使用 important 還是難以覆寫或修改。這邊要介紹在 Quasar Framework 之中該如何強硬地修改 CSS 樣式,來客製化 Quasar 提供的元件。

客製化修改 Quasar 的 CSS 樣式

Quasar Framework 提供許多元件、Plugin,以及完善的樣式表,讓我們能完成各種想要的功能與頁面,完成後還能透過同一套程式碼打包出 SPA、SSR、PWA、Mobile App (Cordova),或者 Electron App。

然而在使用 Quasar Framework 時,如果想要自訂 CSS 樣式,很可能會出現改不動的狀況!這個問題在其他框架之中也時常發生,像是 Element UI 與 Vuetify 等框架也都會有一樣的問題。

那麼我們該如何修改 Quasar 的 CSS 樣式呢?以下提供兩種做法,並且說明這兩種做法各自的優缺點。

不建議的做法:元件的 Style 不要使用 Scoped

通常我們在各個 Vue 元件裡面撰寫樣式時,會再加上 scoped 這個屬性,讓元件裡面的樣式只在該元件中生效,但是在 <style> 使用 scoped 屬性,可能會導致我們應用 Quasar Components 時無法加載到客製化修改的 CSS,然而只要將 scoped 移除掉就能吃到樣式了。

之所以會出現這個狀況,是因為 Quasar 元件並非只有最外面一層而已,有些元件會有許多子層,這些包裝好的子層通常是在頁面加載後才會出現的,又因為 scoped 預設只讓父層吃到樣式,所以就會出現子層沒有吃到樣式的情況哩。

所以我們只要把 scoped 屬性拿掉,不管是哪一層就都能吃到樣式了。

1<style lang="scss">
2  .el {
3    background: $primary;
4  }
5</style>
6

這個方法的優點是不用做什麼更改,操作上相當快速,就只是把 scoped 拿掉而已,但是缺點卻也顯而易見,那就是這些 CSS 通通變成都會共用的,這樣會汙染到全域,可能會影響到其他元件,所以個人比較不建議使用這個方法。

推薦方法:深度作用選擇器

使用 vue-loader 的深度作用選擇器可以提升操作的權重,這麼做不但能影響到我們想要更改的子元件,同時也能保有 scoped 屬性,這樣一來就不會汙染全域了。

深度作用選擇器在 CSS 裡面是 >>>,不過 SASS/SCSS 無法解析 >>>,所以必須改成 /deep/ 才能使用。

1<style lang="scss" scoped>
2  .deep-button /deep/ .el {
3    background: $primary;
4  }
5</style>
6

結論

其實使用 UI 框架前就應該與公司的 UI 討論過,如果 UI 喜歡客製化自己的風格,那麼打從一開始就不要使用 UI 框架會比較好。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫