ionic v4修改组件样式

Posted 2021-01-18 stardee

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