ionic v4修改組件樣式

新項目使用Ionic 4, Ionic 4的組件使用了shadow DOM和CSS4變量。

我們需要注意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》