1. 程式人生 > >ionic v4修改組件樣式

ionic v4修改組件樣式

color -o pro href root min prime shm page

新項目使用Ionic 4, Ionic 4的組件使用了shadow DOMCSS4變量

我們需要註意API文檔中的 CSS Custom Properties

假如我們想要修改ion-item組件的背景顏色。

我們可以在home.page.scss中這樣寫:

ion-item {
    --ion-item-background-color-active: #000;
    --min-height: 100px;
}

在 theme/variables.scss中 使用 :root 選擇器進行全局修改:

:root {
    --ion-item-background-color-active: #000;
}

關於Ionic v4的shadow DOM推薦這篇文章
《Shadow DOM Usage in Ionic Web Components》

關於CSS4變量可以參考《A Primer on CSS 4 Variables for Ionic 4》

還有一篇關於Ionic slot《Understanding How Slots are Used in Ionic 4》

ionic v4修改組件樣式