如何在 ionic 4 中的 shadow DOM 中添加自定义 CSS？答案

【问题标题】：How to add custom css inside shadow DOM in ionic 4?如何在 ionic 4 中的 shadow DOM 中添加自定义 CSS？
【发布时间】：2021-02-03 09:56:54
【问题描述】：

我有这个 html 代码：

<ion-content>
    <section class='container'>
        ....
    </section>
</ion-content>

我只是想让内容在屏幕上居中，所以我先在inspector上添加了这个css。

我瞄准了主要元素，它起作用了。

现在，我将这个 css 添加到页面的 scss 文件中。

main {
    display: flex;
    align-items: center;
    justify-content: center;
}

但是 css 不起作用。有什么方法可以在 <main> 内部的 ion-content 阴影根目录中添加自定义 css？

请帮忙。我被困在这个问题上。

【问题讨论】：

【解决方案1】：

没关系。我用这个解决了。

ion-content::part(scroll) {
    display: flex;
    align-items: center;
    justify-content: center;
}

但是，如果你们有更好的想法，请分享。谢谢！

【讨论】：