新项目使用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》