Ionic 4 - 全球 SCSS 替换“离子卡”magins？

Question

<ion-card> 在 box 元素的所有边上都有 10px 的默认边距。我希望这些元素周围有 0px 的边距。

我无法同时使用 ion-card 和 .sc-ion-card-md-h 选择器在全局样式中替换它（并且很确定后者仅在应用 md/android 时才有效）。

我已经能够在全局范围内选择 一些 其他元素，但是 大多数 高级组件以这种方式运行，我无法在全局范围内替换它们.. 我的样式很简单不要出现在 <ion-card> 元素的元素检查中。

似乎在这些“shadow-root”<style> 元素中有些东西我无法定位并覆盖样式，除非我处于 SCSS 文件的深层组件级别；但是，我确实需要全局替换这些样式，以避免将 CSS 复制/粘贴到每个组件中（因为这些 <ion-card> 确实存在于我的应用程序的每个页面上。

例如，使用下面的代码，我的卡片和卡片标题的背景都不会变红.. 在元素样式窗口中的任何位置检查页面时，这些 CSS 样式也不会显示。但是，如果我使用 body 作为选择器，body 会变成红色，这意味着我的全局样式正在加载，我无法选择这些组件：

ion-card,
.sc-ion-card-md-h,
ion-card-title {
    --background: red !important;
    background-color: red !important;
}

如果我将这些相同的样式放在上面有帖子的home.page.scss 中，则样式确实适用（我认为这是因为我的目标是该页面内的插槽）。为什么它只适用于组件级别而不是全局级别？

关于如何在全球范围内正确定位这些组件的任何想法？

Answer 1

使用::ng-deep 将样式层叠给子级。