通过 CSS 更新在影子 dom 中设置的样式

Question

这个问题适用于Ionic，但它的答案可能更普遍地适用于CSS。我不确定。

我正在使用离子 4 来创建具有特定样式的阴影 DOM 元素。我有以下几点：

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>

我希望"浮动标签"文本在浮动时比平时向左移动得更远。我可以很容易地用标签本身的样式做到这一点。

但是，在ion-item下创建的影子 DOMdiv 有自己的样式，包括overflow: hidden.我还没有找到从样式表中更新这些样式的方法。我尝试使用/deep/和其他各种选择器，但这些似乎不起作用，并且似乎也删除了对它们的支持。我知道您可以使用CSS变量，但是此特定属性overflow不是由变量设置的。我也明白您可以使用 DOM 将样式注入影子 DOM，但我想避免这样做，因为我必须在每个组件的某个地方执行此操作，而不是能够在应用程序中执行一次。

如果变量不可用，有什么方法可以使用 CSS 覆盖在影子 DOM 中设置的样式？

Answer 1

你应该尝试使用 ng-deep 选择器直接操作 DOM 元素样式。

::ng-deep {
.your-class { // Used to contain your deep change to a localized node
your style
}

角度指南 ： https://angular.io/guide/component-styles