css - Ionic 4 改变输入颜色

Question

我正在尝试简单地更改文本/密码输入的颜色。不幸的是，所有能够改变的东西都隐藏在 #shadow-root 后面，所以我的 CSS 无法触及它。

我试过简单地写:

input {
  color:var(--ion-color-primary) !important;
}

但当然它在影子领域内看不到任何东西。 HTML 的布局如下:

<ion-input _ngcontent-c0="" class="form__group__item--input ng-untouched ng-pristine ng-invalid hydrated ion-untouched ion-pristine ion-invalid has-focus" formcontrolname="email" type="text" ng-reflect-name="email" ng-reflect-type="text">
    #shadow-root
        <style></style
        <input> // Need to edit this one
        <slot></slot?
    <input type="hidden" class="aux-input" name="ion-input-0" value="">
</ion-input>

控制输入颜色的 css 没有使用我可以在其他任何地方更改的变量

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
}

但我无法覆盖这些。我觉得我需要在 root 中做一些事情，但我还不知道 CSS 变量。

Ionic 4 中有什么方法可以改变输入文本的颜色吗？？

Answer 1

快速谷歌搜索显示this解释你可以使用 ::shadow 伪元素来设置影子树中元素样式的网站，所以试试这个

ion-input::shadow input {
  color: var(--ion-color-primary);
}

编辑:

我进一步挖掘发现了 this所以帖子说你不能用全局 CSS 在影子 DOM 中设置样式，所以你需要创建一个 style 标签并将其附加到主机。

// host is the element that holds the shadow root:
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);